如何使用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,
                    width: "14em",
                    type: "cancel"                    
                });
                return;
            }
        });
    　}
70　　}
}

 4、遇到的坑：

（重點）以上邏輯部分中上拉加載的方法infinite()部分一定先執行setTimeout方法，再進行判斷是否加載，否則會出現多次加載的問題。