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

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

初始化loading为false,finished为false。

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

<van-tabs v-model="active" sticky @click="changeAct">

            <van-tab v-for="(item,ind) in navtitle" :title="item" :key="ind">

                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(page,keyword,orderColumn)">

                        <IndexTemp v-for="(item,i) in goodList" :good="item" :key="i"></IndexTemp>

                    </van-list>

                </van-pull-refresh>

            </van-tab>

        </van-tabs>

在切换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,结束加载。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。