vue vant动态滑动加载更多

<template>
    <div class="shopmall">

        <div class="loading-box" v-if="datashow">
            <div class="loading">
                <van-loading color="#1989fa" />
            </div>
        </div>


        <div class="shopban">
            <van-swipe :autoplay="4000" :loop="true" indicator-color="#fff">
                <van-swipe-item v-for="(image, index) in bannerlist" :key="index">
                    <img :src="image.pic">
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-tabs v-model="active" swipeable @change="tabChange" sticky swipeable @scroll='handleScroll'>
            <div class="allfixed" @click="wholehas"><span :class="{'underline':active==0}">全部</span></div>
            <van-tab v-for="(item,index) in tabtarlist" :key="index" :title="item.name">
                <van-list :immediate-check='true' v-model="loading" :finished="finished" finished-text="" @load="getMore(item.id)">
                    <div class="goodsall">
                        <div class="goodshalf" v-for="(item,index) in tabtarlist[active].itemList" @click="godetail(item)">
                            <div class="goodsitem">
                                <img :src="item.cover_pic">
                                <h5>{{item.name}}</h5>
                                <p>{{item.profile}}</p>
                                <div class="shopdet">
                                    <span class="detcash">{{item.cash_price}}元+{{item.cent_price}}积分</span>
                                    <span class="detku">库存:{{item.store}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>

                <img style="display: block;margin:20px auto;width: 50%;" src="../assets/none.png" v-if="tabtarlist[active].shownothing" />
                <span class="notext" v-if="tabtarlist[active].shownothing">没有内容</span>

            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
    import * as weilink from "../utils/weixin.js";
    import wx from 'weixin-js-sdk'
    import operate from '@/minix/operate.js'
    export default {
        name: 'integshop',
        mixins: [operate],
        data() {
            return {
                viewpage: 1,
                pagesize: 10,
                loading: false,
                finished: false,
                active: 0,
                activeid: 0,
                card_bank: '',
                tabtarlist: [],
                bannerlist: [],
                viewlist: [],
                datashow: true,
            };
        },
        methods: {
            getkinds() {
                let that = this;
                let postdata = {
                    'page': 1,
                    'pagesize': 100,
                }
                this.axios.post('/Api/CentCategory/lists', postdata).then(function(res) {
                    that.datashow = false;
                    if (res.status === '1') {
                        var item = {};
                        item['id'] = 0;
                        item['name'] = "全部";
                        res.data.unshift(item);
                        that.tabtarlist = res.data;
                        for (const item of that.tabtarlist) {
                            item.itemList = [];
                            item.shownothing = false;
                            item.eachpage = 1;
                            item.eachtabsize = 10;
                        }
                        console.log(that.tabtarlist)
                    } else {}
                }, function(res) {
                    console.log(res)
                })
            },
            tabChange(val) {
                var that = this;
                if (that.tabtarlist[that.active].itemList.length > 0) {
                    that.loading = false;
                    that.finished = true;
                } else {
                    that.loading = false;
                    that.finished = false;
                }
                let valid = this.tabtarlist[val].id;
                that.activeid = valid;
                console.log(this.active)
            },
            godetail(val) {
                console.log(val)
                sessionStorage.setItem('setgoodsid', val.id)
                this.$router.push({
                    name: 'integdetail',
                    params: {
                        putgoodsid: val.id,
                    }

                })
            },
            onLoad() {

            },
            getMore(val) {
                setTimeout(() => {
                    let that = this;
                    let postdata = {
                        'page': that.tabtarlist[that.active].eachpage,
                        'pagesize': that.tabtarlist[that.active].eachtabsize,
                        'category_id': that.activeid
                    }
                    const viewtoast = this.$toast.loading({
                        duration: 0,
                        message: '加载中...',
                        forbidClick: true,
                    });
                    this.axios.post('/Api/CentGoods/lists', postdata).then(function(res) {
                        if (res.status === '1') {
                            viewtoast.clear();
                            if (res.data.length > 0) {
                                that.tabtarlist[that.active].itemList = that.tabtarlist[that.active].itemList.concat(res.data);
                                that.loading = false;
                                that.tabtarlist[that.active].eachpage += 1; //页数+1
                            } else {
                                that.finished = true;
                            }
                        } else {
                            that.finished = true;
                            viewtoast.clear();
                        }

                        if (that.tabtarlist[that.active].itemList.length > 0) {
                            that.tabtarlist[that.active].shownothing = false;
                        } else {
                            that.tabtarlist[that.active].shownothing = true;
                        }

                    }, function(res) {
                        viewtoast.clear();
                        console.log(res)

                    })
                }, 500);
            },
            getbandata(val) {
                let that = this;
                this.axios.post('/Api/CentGoods/banners', ).then(function(res) {
                    if (res.status === '1') {
                        that.bannerlist = res.data
                    } else {

                    }
                }, function(res) {
                    console.log(res)
                })
            },


            wholehas() {
                this.active = 0;
            },
            handleScroll({
                scrollTop
            }) {
                console.log('高度' + scrollTop)
            },
        },
        mounted() {
        },
        created() {
            // 微信分享配置
            var that =this;
            that.getbandata();
            that.getkinds();
            wx.ready(function() {
                wx.hideOptionMenu();
                wx.hideMenuItems({
                    menuList: []
                });
            })
        }
    };
</script>
<style>
    .shopmall .van-list {
        background: white !important;
    }

    .shopmall .van-tab__pane {
        background: white !important;
    }

    .shopmall .van-tabs__line {
        background: #ECBD50 !important;
    }

    .van-sticky--fixed .allfixed {
        position: fixed !important;
    }
</style>
<style scoped="scoped">
    .loading-box {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        /*使得loading层浮动到其他层上面，并且尺寸和整个屏幕大小一样*/
        z-index: 1000;
        /*给个 z-index 覆盖到主题内容上面*/
        background: #fff;
        /*遮挡后面的内容*/
        display: flex;
        /*采用flex布局*/
        justify-content: center;
        /*loading-box中的内容 水平居中*/
        align-items: center;
        /*loading-box中的内容 垂直居中*/
    }

    .loading {
        text-align: center;
        /*文本水平居中*/
    }

    .loading img {
        display: block;
        width: 90%;
        margin: auto;
    }

    .notext {
        display: block;
        text-align: center;
        font-size: 12px;
        color: #969799;
        text-align: center;
    }

    .shopban img {
        display: block;
        width: 100%;
        height: 195px;
    }

    .goodsall {
        width: 97%;
        margin: auto;
        clear: both;
        overflow: hidden;
        padding-bottom: 30px;
    }

    .goodshalf {
        width: 50%;
        box-sizing: border-box;
        float: left;
        margin: 14px auto auto auto;
        height: 300px;
    }

    .goodsitem {
        width: 96%;
        margin: auto;
        height: 210px;
    }

    .goodshalf img {
        display: block;
        max-width: 100%;
        margin: auto;
        max-height: 175px;
        border-radius: 6px;
    }

    .goodshalf h5 {
        color: #282828;
        font-size: 14px;
        padding: 0px 0px;
        margin: 6px 0px !important;
        text-align: justify;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .goodshalf p {
        margin: 1px 0px;
        font-size: 13px;
        line-height: 1.5;
        color: #656565;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .goodshalf .shopdet {
        display: block;
        font-size: 12px;
        padding: 6px 0px;
        clear: both;
    }

    .shopdet span {
        display: block;
        float: left;
    }

    .detcash {
        width: 60%;
        text-align: left;
        color: #E3AE46;
    }

    .detku {
        width: 40%;
        color: #282828;
        text-align: right;
        font-size: 12px;
        color: #666666;
    }

    .allfixed {
        background: white;
        position: absolute;
        z-index: 999;
        color: #646566;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        flex-basis: 22%;
        top: 0px;
        width: 70px;
        text-align: center;
        height: 44px;
        padding: 0px 8px;

    }

    .allfixed span {
        display: block;
        box-sizing: border-box;
        height: 44px;
        width: 42px;
        margin: auto;
    }

    .underline {
        border-bottom: 3px solid #ECBD50;

    }
</style>