關於vux-ui框架的scroller組件所踩的坑

這是我在做一個demo的一個上垃加載下拉刷新功能時所遇到的問題，由於傷了好一會腦筋，所以留下這篇筆記以供后續查詢；

在上代碼前建議在開發項目時不要優先選擇vux這個框架，因為有一些常用的功能組件官方已不再更新，當然如果你的項目中沒有那些功能的話，這個框架的確是一個不錯的選擇，或者說用別的框架代替vux官方放棄的功能，也是可以的，具體看個人吧！

先說說我遇到的問題吧：其實問題就一個，就是上拉加載的問題。

     1、一開始我是用該組件的@on-scroll-bottom觸發方法實現數據加載，此方法由該組件的scroll-bottom-offset屬性觸發，官方文檔上說明這個方法會觸發多次，我想着用一個狀態去禁止多吃觸發，結果失敗了，果斷換了另一個方法，即@on-pullup-loading。

     2、@on-pullup-loading這個方法是可以實現的，不過有幾個注意點需要格外注意，因為這個方法只觸發一次，那么怎么讓它可以多次執行呢。。。。  嘿嘿！！  上代碼先

 

        

 

loadMore () {
    this.pageNum ++;
    this.getNewsList(false);

}, 
refresh () { 
　　this.pageNum = 1;

　　this.getNewsList(true)

},

　　

getNewsList (type) {
            this.showloading = true
            let param = {
                pageSize:10,
                pageNum:this.pageNum,
                type: parseInt(this.tabType)
            }
    　　　　 api.getSearchList(param).then(res => {
                if(res.data.list.length == 0){
                    this.isScrollerShow = false;                        
                }
                this.isDataShow= true;
                //  type == undefined 表示為刷新或者是初始化   type = false 表示加載更多
                if( type == false){                    
                    for(let item of res.data.list){
                        this.list.push(item)
                    }    
                    // 判斷是否還有數據 
                    if(res.data.list.length < param.pageSize){
                        // 沒有就顯示底線以及禁用上拉
                        this.isEnd = true;
　　　　　　　　　　　　　　// 沒有數據時這里要禁止調上拉組件，不然會一直顯示在加載中
                        this.status.pullupStatus = 'disabled'
                    }else{
                          // 還有數據就開啟上拉，並重置   這里一定要設置 pullupStatus為default   否則下拉組件會一直顯示加載中
                        this.status.pullupStatus = 'default'　　　　　　　　　　　　　　
                    }          
                    return;
                }else if( type == true ){
　　　　　　　　　　　　this.$refs.scroller.enablePullup()   //  啟用上拉組件 ==》 這步極關鍵，否則下拉刷新后再上拉無效
　　　　　　　　　　　　this.$nextTick( ()=> {
　　　　　　　　　　　　　　this.$refs.scroller.donePulldown()
　　　　　　　　　　　　})
　　　　　　　　　　}
                //  以下為下拉刷新或初始化

                this.isLoadMoreShow = false;
                this.isScrollerShow = true;
                this.list = res.data.list; 
　　　　         this.isEnd = false;

            })
        },

　　好吧！大致就記得這么多了，希望能幫主到人，如果有問題可以留言，但是不對的話請勿噴！！！