小程序之修改轮播图的小点样式

最新推荐文章于 2023-12-18 10:56:32 发布

weixin_33699914

最新推荐文章于 2023-12-18 10:56:32 发布

阅读量821

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/momozjm/p/8609728.html

版权

小程序之修改轮播图的小点样式

1、单独写一个小点的元素。

<view class='swiper-box'>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">  
      <block wx:for="{{imgUrls}}" wx:key="unique">  
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
      </block>  
    </view>
  </view>

2、将轮播图组件自带的小点隐藏

indicatorDots: false

3、修改样式

swiper{
  width: 100%;
}

.swiper-box{
  position: relative;
  width: 100%;
}
.dots{  
  position: absolute;  
  left: 0;  
  right: 0;  
  bottom: 20rpx;  
  display: flex;  
  justify-content: center;  
}  
.dots .dot{  
  margin: 0 8rpx;  
  width: 14rpx;  
  height: 14rpx;  
  background: #fff;  
  border-radius: 8rpx;  
  transition: all .6s;  
}  
.dots .dot.active{  
  width: 24rpx;  
  background: #f80;  
} 

swiper image {
  width: 100%;
  height: 100%;
}

转载于:https://www.cnblogs.com/momozjm/p/8609728.html