1.0.3 • Published 9 months ago
j-swiper v1.0.3
####### 传参
@@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>