小白入门---Vue无限滚动（vue-infinite-scroll）

Vue无限滚动（vue-infinite-scroll）

1.安装插件

1.npm i vue-infinite-scroll –save:安装vue-infinite-scroll插件并且会将包的名称及版本号放在dependencies里面

2.D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而–save会将包的名称及版本号放在dependencies里面《上线需要依赖的我们都需要写在dependencies里面》

2.使用插件

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
1
2

3.在组件中使用插件

使用v-infinite-scroll=”loadMore”当页面触发到底部的时候 执行这个函数，并使用infinite-scroll-disabled=”busy”判断当滚动满足条件后是否执行loadMore函数，使用infinite-scroll-distance=”x”距离底部多远然后执行loadMore。

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
1
2
3

<script>
  import HeadNav from '@/components/Head'//引入组件并重命名
  import NavBread from '@/components/NavBread'//引入组件并重命名
  import Footer from '@/components/Foot'//引入组件并重命名
  import axios from 'axios'//引入axios
  export default{
    data(){
      return{
        list:[],//显示商品的列表
        sortFlog:true,//默认是按照正序价格排列
        priceChecked:'all',//默认选中的价格范围
        busy:true,//默认允许滚动执行loadMore函数
        page:1,//默认分页为第一页
        pageSize:8,//默认每页显示8条数据
        flag:false,//默认没有分页
        priceFilter:[//价格过滤器
          {
            startPrice:'0',
            endPrice:'100'
          },
          {
            startPrice:'1000',
            endPrice:'500'
          },
          {
            startPrice:'5000',
            endPrice:'1000'
          },
          {
            startPrice:'1000',
            endPrice:'5000'
          }
        ]
      }
    },
    components:{//组件
      HeadNav,
      NavBread,
      Footer,
    },
    created(){
      this.getGoods()
    },
    methods:{
          getGoodsList() {
            axios.get("http://easy-mock.com/mock/59664d4d58618039284c7710/example/goods/list").then(res=>{
                res=res.data.data;
//                this.list=res;
            })
          },
      getGoods(flag){
              let sort=this.sortFlog?1:-1;
              let param={
                  sort:sort,
                priceLevel:this.priceChecked,
                page:this.page,
                pageSize:this.pageSize
              }
        axios.get('/goods/list',{params:param}).then(res=>{
//          this.list= res.data.result;
            if(flag){//判断是否通过分页
                this.list=this.list.concat(res.data.result);//分页数据追加到这个list里面
              if(res.data.result.length==0){//判断数是否加载完成，就让数据截停
                  this.busy=true;
              }else{
                  this.busy=false;
              }
            }else{
                this.list=res.data.result;
                this.busy=false;
            }
            console.log(res.data.result);
        })
      },
      sortGoods(){
        this.sortFlog=!this.sortFlog;
        this.getGoods();
      },
      setPriceFilter(index){
          this.priceChecked=index;
          this.page=1;
          this.getGoods();
      },
      loadMore:function () {
        this.busy=true;
        setTimeout(()=>{
            this.page++;
            this.getGoods(true);
        },500)
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93