更新记录

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显示问题

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.7.3 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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')

参数

参数 说明
tabs Array w数据结构,具体看使用方法
activeColor String 文字样式

联系作者

Eamil:wangqf19@189.cn

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问