vue项目的问题--tab切换上拉加载

loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值)

初始化loading为false,finished为false。

加载的list,页面上有个切换的tab,实现切换不同的类型,加载不同的list的功能。vant-ui的list就有个bug,当切换tab的时候,它的onload没方法自动触发。然而在当前标签页,如果列表已经加载完毕再去切换,onload就可以实现自动触发。

           

               

                   

                       

                   

               

           

       

在切换tab后执行初始化函数

//切换tab changeAct(index, title) {

                this.active = index;

                this.orderColumn = title =='价格'?'price': title =='上新'?'time':'default';

                if(this.orderColumn =='price') {

                    this.orderTypeCut = !this.orderTypeCut;

                }

                this.orderType =this.orderTypeCut ?'desc':'asc';

                this.page =1;

                this.goodList = [];

//切换的时候这个两个状态要加上,不然上拉加载在这个时候也会触发

                this.loading =true;

                this.finished =false;

                if(this.loading){

                    this.onLoad(this.page,this.keyword,this.orderColumn);

                }

            },

上拉加载触发的方法

onLoad(page, keyword, orderColumn) {

                this.pageload=true;

                varself =this;

                varurl =this.util.head_host +'goods/list';

                varparams=new FormData();

                params.append('client_id',this.util.client_id);

                params.append('timestamp',this.util.timestamp);

                params.append('sign',this.util.sign);

                params.append('page', page);

                params.append('keyword', keyword);

                params.append('orderColumn', orderColumn);

                if(orderColumn =='price') {

                    params.append('orderType',this.orderType);

                }

                this.$api({

                    method: 'POST',

                    url: url,

                    data: params,

                    headers: {

                        'token': self.util.access_token

                    },

                }).then(function(res) {

                    if(res.data.code ==0) {

                        //console.log(res.data)if(res.data.data.length >0) {

                            self.goodList = self.goodList.concat(res.data.data);

                        }

                        self.lastPage = res.data.nextPage;

                        self.page = self.lastPage;

                        // 加载状态结束self.loading =false;

                        // 数据全部加载完成if(self.lastPage ==0) {

                            self.finished =true;

                        }

                    } elseif(res.data.code ==401) {

                        self.callJsFunction;

                        self.onLoad(self.page, self.keyword, self.orderColumn)

                    }

                    self.pageload=false;

                }).catch(function() {

                })

            },


在第一次onload的过程中将loading设置为false,则触发第二次loading,当执行到满足结束条件的时候,finished为true,结束加载。

你可能感兴趣的:(vue项目的问题--tab切换上拉加载)