微信小程序自定义swiper指示灯二

﹏ヽ暗。殇╰゛Y 2023-02-10 07:42 28阅读 0赞

不说废话了,直接上代码

wxml

<swiper class="viewpager" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}" circular="{
       {circular}}" bindchange="changeSwiper">
            <swiper-item wx:for="{
       {slideshow}}" wx:key="index">
              <image src="{
       {item.showImg}}" class="image"></image>
            </swiper-item>
          </swiper>
          <view class="dots">
            <block wx:for="{
       {slideshow}}" wx:key="index">
              <view class="dot{
       {index == currentSwiper ? ' active-z' : ''}}"></view> 
            </block>
          </view>

wxss

.viewpager {
      width: 100%;
      height: 300rpx;
      border-radius: .5rem;
      margin-bottom: 12rpx;
      overflow: hidden;
    }
    .viewpager .image {
      width: 100%;
      height: 100%;
      border-radius: .5rem;
    }
    
    /*用来包裹所有的小圆点 */
    .dots {
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    
    /*未选中时的小圆点样式 */
    
    .dot {
      width: 7rpx;
      height: 6rpx;
      border-radius: 3rpx;
      margin-right: 26rpx;
      background-color: #BFBFBF;
    }
    
    /*选中以后的小圆点样式 */
    
    .active-z {
      width: 26rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #EC5E64;
    }

主角js

Page({
    
        data: {
            slideshow: [{   //这里只用了两张本地图片作为测试
                id: 1,
                showImg: "../../img/slideshow/vivo.jpg"
            },
            {
                id: 2,
                showImg: "../../img/slideshow/xinchun.jpg"
            }
            ],
            // 轮播数据 + 效果 S
            indicatorDots: true,
            autoplay: true, // 自动播放
            interval: 5000, //轮播时间
            duration: 300, // 滑动速度越大越慢
            circular: true, //是否循环
            beforeColor: "lightgray", //指示点颜色
            afterColor: "white", //当前选中的指示点颜色
            currentSwiper: 0,
        },
        changeSwiper: function (e) {   /主要函数
            this.setData({
                 currentSwiper: e.detail.current
            })
          },
    })

最后来张效果图吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

以上就是所有本次内容

如果对你有帮助,大佬经常做小程序项目,或者刚学小程序加一下QQ群: 1102727334        欢迎大佬入住

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520174238624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70