【uniapp】swiper 自定义轮播图指示点
生活随笔
收集整理的這篇文章主要介紹了
【uniapp】swiper 自定义轮播图指示点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
- 調試基礎庫 2.12.0
- 微信開發者工具 1.03.2008270
- uniapp 開發者工具 HBuilderX 2.9.8
uni-swipper-dot
uniapp官方推薦的swiper組件,該組件能夠更換輪播圖指示點,比如這樣:
插件地址: https://ext.dcloud.net.cn/plugin?id=284
這里想說的是,在微信小程序發現該組件有時在切換圖片時會有抖動現象(一直在高速反復切換圖片)。
要想獲得美美的輪播圖指示點,可以參考如下方案
swiper組件支持對指示點換顏色
<swiper :autoplay="true" :circular="true" :interval="5000" :duration="1000" :indicator-dots="true" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="rgba(7, 193, 96, 0.7)" ><swiper-item v-for="(item, index) in bannerList" :key="index" @click="clickItem(item)"><view><image :src="item.coverImg" mode="widthFix" /></view></swiper-item> </swiper>- indicator-color :指示點顏色
- indicator-active-color : 當前指示點顏色
不止滿足于換顏色時,可以這樣做
參考:詳解微信小程序swiper小圓點默認樣式改變
總結
以上是生活随笔為你收集整理的【uniapp】swiper 自定义轮播图指示点的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微信小程序rpx作为高度单位时,在 io
- 下一篇: 散光自然恢复的好办法