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

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

1、安装：

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

2、引入：

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

 

（在main.js文件引入）

3、使用：

　组件部分

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

　逻辑部分

export default {
　　data () {
　　　　return {
       　　noDate:false,//判断是否加载
       　　data:{
          　　keyWord:'',
          　　pageIndex:1,
          　　pageSize:50,
          　　status:'',
        　},
        　notilist:[]
    　}
   },
　　mounted() {
   　　this.qryNoticeList();
   },
   methods: { 
   　　// 下拉刷新
   　　refresh(){
      　　let _this=this;
      　　_this.data.pageIndex=1;      //重置页数刷新每次页数都是第一页
      　　_this.noDate=false;          //重置数据判断
      　　_this.qryNoticeList();
  　　},
     // 上拉加载
     infinite(done){
     　　let _this=this;
        setTimeout(() => {
            if(_this.noDate){
                _this.$refs.myscroller.finishInfinite(true);//finishInfinite函数为scroller实例的方法，当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据
            }else{
                _this.data.pageIndex++;
                _this.qryNoticeList(done);
                
            }
        }, 1000);
    },
    //获取重要通知列表
    qryNoticeList(done){
        let _this=this;
        api.qryNoticeList(_this.data).then((response)=>{
            //停止下拉刷新
            _this.$refs.myscroller.finishPullToRefresh();
            if (response.code === 200){
    　　　　　　　if(typeof (done)=="function"){
　　　　　　　　　　　　　done();
　　　　　　　　　　　 }
                if(response.data.haveNextPage=='0'){
                    _this.noDate=true;
                }else{
                    _this.noDate=false;
                }
                // 判断是下拉刷新还是上拉加载
                if(_this.data.pageIndex==1){
                    _this.notilist = response.data.list;
                }else{
                    _this.notilist=_this.notilist.concat(response.data.list);
                }
                
            }else{
                _this.$vux.toast.show({
                    text: response.msg,
                     "14em",
                    type: "cancel"                    
                });
                return;
            }
        });
    　}
70　　}
}

 4、遇到的坑：

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