更新记录
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显示问题
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
2.7.3 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
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