vue vant上拉加载 下拉刷新

index.vue       

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">         
            <div>
                <div class="zoneBox">
                   <!--  <p class="fl currentZone">{{currentZone}}赛区</p> -->
                    <p class="fl currentZone">全国赛区</p>
                   <!--  <p class="fr switchZone" @click="switchFun">切换赛区</p> -->
                </div>
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="onLoad">
                    <div class="list" id="list-content">
                        <div v-show="showlist">
                            <div class="list_item" v-for="(item,index) in list" :key="index">
                                <div @click="detailFun(item.shopInfo.shopId)">
                                    <div class="pic1">
                                        <van-image fit="cover" :src="item.shopInfo.shopFirstPic.firstPic" />
                                        <p>{{item.rank}}</p>
                                    </div>
                                    <div class="pic2">
                                        <van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic1" />
                                        <van-image fit="cover" :src="item.shopInfo.shopInsidePics.pic2" />
                                    </div>
                                </div>
                                <div class="box1">
                                    <div class="fl">
                                        <p class=" shopName">{{item.shopInfo.shopName.shopName}}</p>
                                        <p>{{item.votes}}票</p>
                                    </div>
                                    <div class="fr vote" @click="voteFun(item.shopInfo.shopId,index)">
                                        投票
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="noList" v-show="noList">
                             <img src="../../static/img/default.png" alt="">
                            <p>该赛区暂无参赛信息!</p>
                        </div>
                        <div class="box"></div>
                    </div>
                </van-list>
            </div>
        </van-pull-refresh>

             data() {
            return {

            loading: false,
            finished: false,
            isLoading: false, //是否处于下拉刷新状态,

            page: 1,
            pageSize: 10,
            list: [],

    },

 onLoad() {
            var that = this;
            that.page++;
            var page = that.page;
            var openId = that.openId;
            var areaId = '0000';
            that.$http.post('url', {
                page: page,
                pageSize: 10,
                areaId: areaId,
                openId: openId,
            }, {
                emulateJSON: true
            }).then(function(res) {
                    that.loading = false;
                    console.log(res)
                    var rank = res.data.data.ranks;
                    // that.list = res.data.data.ranks;
                    if (res.data.data.ranks != 0) {
                        for (var i = 0; i < rank.length; i++) {
                            that.list.push(rank[i])
                        }

                    } else {
                        that.finished = true;
                    }

扫描二维码关注公众号,回复: 10120341 查看本文章

                }, (error) => {
                    console.log(error);
                }

            );

        },

    onRefresh() {

            setTimeout(() => {
                this.finished = false;
                this.isLoading = false;

            }, 500);
        },

发布了5 篇原创文章 · 获赞 4 · 访问量 629

猜你喜欢

转载自blog.csdn.net/sun_0516/article/details/105070408