更新记录
1.0.1(2024-10-12)
下载此版本
无
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.24 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
####### 传参
@@description 自定义swiper
@@property {Number} width 宽 默认750
@@property {String} height 高 默认100%
@@property {Number} itemWidth item宽 默认750
@@property {Number} itemHeight item高 默认'100%'
@@property {Number} current 选中项索引 默认0
@@property {Number} duration 持续时间
@@property {Number} size tab数组的长度
####### 使用方法
- 在pages.json中,配置easecom
{
"easycom": {
"^j-(.*)": "@/uni_modules/j-swiper/components/j-swiper/j-$1.vue"
},
}
- 例如与zTbas搭配使用
<template>
<view style="height: 100vh;">
<view>
<z-tabs ref="tabs" :list="list" :current="current" @change="tabClick"></z-tabs>
</view>
<jSwiper
:current="current"
:size="5"
@transitions="transition"
@change="change">
<jSwiperItem v-for="(item, idx) in list" :index="idx" :key="idx">
{{ item }}
</jSwiperItem>
</jSwiper>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
list: [
'页面1',
'页面2',
'页面3',
'页面4',
'页面5'
]
}
},
methods: {
tabClick (e) {
this.current = e;
},
transition (e) {
const num = -(e);
this.$refs.tabs.setDx(num);
},
change (e) {
this.current = e;
this.$refs.tabs.unlockDx();
}
}
}
</script>