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

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

在上代碼前建議在開發項目時不要優先選擇vux這個框架，由於有一些經常使用的功能組件官方已再也不更新，固然若是你的項目中沒有那些功能的話，這個框架的確是一個不錯的選擇，或者說用別的框架代替vux官方放棄的功能，也是能夠的，具體看我的吧！

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

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

     二、@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;

            })
        },

　　好吧！大體就記得這麼多了，但願能幫主到人，若是有問題能夠留言，可是不對的話請勿噴！！！