更新记录

1.0.3（2021-03-25）

1.0.3 初始化失败解决方案：refs手动触发一次init

1.0.2（2021-03-23）

1.0.2 px替换rpx

1.0.1（2021-03-23）

1.0.1 修复des显示问题

平台兼容性

1、安装方式

uniapp 插件市场安装

npm 方式安装

npm install tabs-swiper
npm i tabs-swiper

2、使用方法

引入组件

import tabsSwiper from '@/components/tabsSwiper.vue'

export default {
    components: {
        tabsSwiper,
    },
}

HTML部分

<tabsSwiper  ref="tabsSwiper" activeColor="#efc232" :tabs="tabsData">
    <template v-slot="{listData}">
        <view v-for="(item,index) in listData" :key="index">
            {{item}}
        </view>
    </template>
</tabsSwiper>

数据格式

tabsData: [{
        title: '标题1',
        des: "描述",
        data: [1, 2, 3, 4, 5]
    }, {
        title: '标题2',
        des: "描述",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }, {
        title: '标题3',
        des: "描述",
        data: [1, 2, 3, 4, 5, 4, 3]
}]

异步请求时

数据加载完成重新赋值即可解决初始化为获取到高度的问题

// 异步数据加载完毕
// ...
this.$forceUpdate()
this.$refs.tabsSwiper.initSwiperHeight('.list0')

参数

联系作者

Eamil：wangqf19@189.cn