uniapp幻灯片自定义dot
文章描述：
uniapp swiper自定义小圆点效果
template
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
:dots-styles="dotsStyles" field="content">
<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
<swiper-item v-for="(item, index) in 3" :key="index">
<view class="swiper-item" :class="'swiper-item' + index">
<image src="../../static/images/banner.png" mode="widthFix"></image>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot><view class="uni-swiper-dot-ui d-flex j-start a-center">
<view v-for="(item,i) in info" class="item"
:class="i == swiperDotIndex ? 'active' : '' "
@click="clickItemUi(i)"
>
</view>
</view>
script
export default {
data() {
return {
wh:'',
info: [1,2,3],
modeIndex: -1,
styleIndex: -1,
current: 0,
mode: 'default',
dotsStyles:{},
swiperDotIndex: 0
}
},
onLoad() {
const sysInfo = uni.getSystemInfoSync();
this.wh = sysInfo.windowHeight
},
methods: {
change(e) {
this.current = e.detail.current
this.swiperDotIndex = e.detail.current
},
clickItem(e) {
this.swiperDotIndex = e
// console.log(e)
},
clickItemUi(e){
this.swiperDotIndex = e
// console.log(e)
}
}
}
发布时间：2022/06/08
发表评论