assess-app/uni_modules/k-tabs-swiper/components/example/kTabsSwiper.vue

<template>
    <view class="kTabsSwiper">
        <k-tabs-swiper
            v-model="current" 
            :tabs="tabs" 
            :tabsSwiper="true"
            bgColor="#1EBB81"
            color="rgba(255,255,255,0.8)"
            activeColor="#FFFFFF"
            fontSize="28rpx"
            lineColor="#FFFFFF"
            :bold="true"
            :scroll="true"
            :fixed="true"
            height="100rpx"
            lineHeight="10rpx"
            @change="changeTab"
            @load="load"
            paddingItem="0 50rpx"
            >
            <template slot="swiperContent" slot-scope="{index}">
                <view class="item" :class="{
                    'item-active': itemIndex % 2
                }" v-for="(item,itemIndex) in tabsLists[index]" :key="itemIndex">
                    <text>{{index}}+{{itemIndex}}</text>
                </view>
                <view class="loading">触发到底部</view>
            </template>
        </k-tabs-swiper>
    </view>
</template>
<script>
import KTabsSwiper from '../k-tabs-swiper/k-tabs-swiper'

export default{
    components:{
        KTabsSwiper
    },
    data() {
        return {
            current: 0,
            tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
            tabsLists:[],
            isListFinished: [],
        }
    },
    onLoad(options) {
        this.init();
    },
    methods: {
        //此为测试用方法
        init(){
            this.tabsLists = new Array(this.tabs.length).fill([]);
            this.tabs.forEach((item,index) => {
                this.isListFinished.push({
                    canLoad:true,
                    pageNum:0,
                    pageSize:20
                });
            })
            this.changeTab(0);
        },
        getData(index){
            let newArr = new Array(20).fill([]);
            this.$set(this.tabsLists,index,this.tabsLists[index].concat(newArr))
            
        },
        load(index){
            this.isListFinished[index].pageNum++;
            uni.showToast({
                title: `第${index}个触发底部，页码${this.isListFinished[index].pageNum}`,
                icon: 'none',
            })
            this.getData(index)
        },
        changeTab(index){
            uni.showToast({
                title: `第${index}个`,
                icon: 'none',
            })
            this.getData(index)
        }
    },
}
</script>
<style lang="scss" scoped>
.title{
    font-weight: bold;
    padding: 16rpx;
}
.line_img{
    width: 42rpx;
    height: 17rpx; 
}
.item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
}
.item-active{
    background: rgb(30, 187, 129);
}
.loading{
    text-align: center;
    padding: 20rpx 0;
}
</style>