微信小程序之自定义swiper轮播图的点点

你好！

思路

大概就是在布局文件写个view，然后用wx:for根据swiper的数据长度来渲染点点的数量，然后swiper的bindchange里提供了选中item的下标，然后根据这个下标在逻辑文件中记录一下，然后由此来判断是否选中,然后更改选中和未选中的状态

主要代码

//swiper的bindchange方法
swiperChange: function(e){
   index = this
   index.setData({
     homeBannerCurrsentIndex:e.detail.current
   })
}
//homeBannnerList swiper数据的数组
//index 当前的索引 homeBannerCurrsentIndex为swiper选中的索引
<view class="whiteDots" wx:if="{{homeBannnerList.length != 0}}">
    <block wx:for="{{homeBannnerList}}">
        <view class="{{index == homeBannerCurrsentIndex ? 'checked' : 'unchecked'}}"></view>
    </block>
</view>

大致思路，如果有什么疑问，可以联系我

我是入梦，谢谢你的观看我的博客，如果有什么错误，请随时联系我，QQ：897589417