如何使用vue-scroller，以及使用vue-scroller的一些坑

咋们还是先看看如何使用vue-scroller：

1、安装：

使用npm 安装
npm install vue-scroller -d

2、引入：

1 import VueScroller from 'vue-scroller'
2 Vue.use(VueScroller)
 

（在main.js文件引入）

3、使用：

　组件部分

1 <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller" style="padding-bottom:37px;">
2 　　<div v-for="(item,index) in notilist" :key="index" @click="click(index)" style="font-size:15px;margin-top:8px;padding:2px 0px;background: #FFFFFF;">
3     　　<h1 style="font-size:15px;margin:4px 8px"><b>{{item.title}}<span v-if="item.status=='2'">-(草稿)</span></b></h1>
4         <p style="font-size:13px;margin:0px 8px">{{item.content}}</p>
5         <p style="font-size:13px;margin:0px 8px;color:#999999">{{item.sendTime}}</p>
6     </div>
7 </scroller>

　逻辑部分

 1 export default {
 2 　　data () {
 3 　　　　return {
 4        　　noDate:false,//判断是否加载
 5        　　data:{
 6           　　keyWord:'',
 7           　　pageIndex:1,
 8           　　pageSize:50,
 9           　　status:'',
10         　},
11         　notilist:[]
13     　}
14    },
15 　　mounted() {
16    　　this.qryNoticeList();
17    },
18    methods: { 
19    　　// 下拉刷新
20    　　refresh(){
21       　　let _this=this;
22       　　_this.data.pageIndex=1;      //重置页数刷新每次页数都是第一页
23       　　_this.noDate=false;          //重置数据判断
24       　　_this.qryNoticeList();
26   　　},
27      // 上拉加载
28      infinite(done){
29      　　let _this=this;
30         setTimeout(() => {
31             if(_this.noDate){
32                 _this.$refs.myscroller.finishInfinite(true);//finishInfinite函数为scroller实例的方法，当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据
33             }else{
34                 _this.data.pageIndex++;
35                 _this.qryNoticeList(done);
36                 
37             }
38         }, 1000);
39     },
40     //获取重要通知列表
41     qryNoticeList(done){
42         let _this=this;
43         api.qryNoticeList(_this.data).then((response)=>{
44             //停止下拉刷新
45             _this.$refs.myscroller.finishPullToRefresh();
46             if (response.code === 200){
47     　　　　　　　if(typeof (done)=="function"){
　　　　　　　　　　　　　done();
　　　　　　　　　　　 }
48                 if(response.data.haveNextPage=='0'){
49                     _this.noDate=true;
50                 }else{
51                     _this.noDate=false;
52                 }
53                 // 判断是下拉刷新还是上拉加载
54                 if(_this.data.pageIndex==1){
55                     _this.notilist = response.data.list;
56                 }else{
57                     _this.notilist=_this.notilist.concat(response.data.list);
58                 }
59                 
60             }else{
61                 _this.$vux.toast.show({
62                     text: response.msg,
63                     width: "14em",
64                     type: "cancel"                    
65                 });
66                 return;
67             }
68         });
69     　}
70　　}
71 }

 4、遇到的坑：

（重点）以上逻辑部分中上拉加载的方法infinite()部分一定先执行setTimeout方法，再进行判断是否加载，否则会出现多次加载的问题。

posted @ 2019-02-20 10:21  web前端小蜗牛  阅读(9298)  评论(0)  编辑  收藏  举报