小程序丨swiper轮播组件样式修改

最新推荐文章于 2024-08-21 17:47:57 发布

weixin_30686845

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/hrone/p/8392480.html

版权

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key='{{index}}'>
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>   wxml直接使用原生的就可以

　wxss里面：

.swiper-box{
  height: 456rpx;
}
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;  
}
圆点的样式
.swiper-box .wx-swiper-dot{
    width:20rpx;
    display: inline-flex;
    height: 20rpx;
    margin-left: 6rpx;
    justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 10rpx;
}
.swiper-box .wx-swiper-dot-active::before{
    background:#ff6682;   
}

转载于:https://www.cnblogs.com/hrone/p/8392480.html