微信小程序 轮播图及自定义指示点的样式

详情见网址：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

本例只用了几个常用的属性

默认官方指示点样式

wxml

<view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"
        interval="{{interval}}"
        duration="{{duration}}"
        indicator-color="{{color}}"
        >
        <block wx:for="{{imglist}}" wx:key="*this">
          <swiper-item>
            <image src='{{item}}'></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
</view>

js

/**
 * 页面的初始数据
 */
data: { 
    imglist:[],           //图片列表
    indicatorDots:true,   //面板指示点，默认为false
    autoplay:true,        //是否自动切换,默认为false
    interval:2000,        //自动切换时间间隔,默认时间为5000ms
    duration:500,         //滑动动画时长,默认时间为500ms
},

自定义指示点的样式

wxml

<!-- 自定义tab样式轮播图 -->
<view class='swiperBar'>
  <swiper 
  duration="{{duration}}" 
  indicator-dots="{{indicatorDots}}" 
  interval="{{interval}}" 
  current="0" 
  autoplay="{{autoplay}}">
    <block wx:for="{{imglist}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>
</view>

js

        imglist:["http://47.94.4.201/public/file/nihao.jpg",
         "http://47.94.4.201/public/file/gaoshan.jpg", 
         "http://47.94.4.201/public/file/guomao.jpg", 
         "http://47.94.4.201/public/file/timg.jpg",
        "http://47.94.4.201/public/file/yese.jpg"],           //图片列表
        indicatorDots:true,   //面板指示点，默认为false
        autoplay:true,        //是否自动切换,默认为false
        interval:2000,        //自动切换时间间隔,默认时间为5000ms
        duration:500,         //滑动动画时长,默认时间为500ms

wxss

样式的顺序不要改，改了会有问题

/* 轮播图部分 */
.swiperBar {
    width: 710rpx;
    height: 337rpx;
    margin: 0 auto;
    position: relative;
  }
   
  .swiperBar swiper {
    width: 100%;
    height: 100%;
  }
   
  .swiperBar image {
    width:100%;
    height: 100%;
    -webkit-border-radius: 12rpx;
    -moz-border-radius: 12rpx;
    border-radius: 12rpx;
    -webkit-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
  }
   
  /* 设置点点的层级 */
   
  .swiperBar .wx-swiper-dots.wx-swiper-dots-horizontal {
    position: absolute;
    /* 设置tab选项卡距离顶部的距离 */
    top: 280rpx;
    z-index: 999;
  }
   
  /* 设置未选中点的宽，高 */ 
  .swiperBar .wx-swiper-dot {
    display: inline-flex;    
    width: 20rpx;
    height: 8rpx;
    margin-left: 12rpx;
    justify-content: space-between;
  }
   
  .swiperBar .wx-swiper-dot::before {
    content: '';
    flex-grow: 1;
    background: #666;
    border-radius: 8rpx;
    -webkit-border-radius: 8rpx;
    -moz-border-radius: 8rxp;
  }
   
  /* 设置当前点的背景色 */ 
  .swiperBar .wx-swiper-dot-active::before {
    background: #ff8a00;
  }
   /* 设置当前点的宽 */ 
  .swiperBar .wx-swiper-dot.wx-swiper-dot-active {
    width: 20rpx;
  }

自定义样式的更多方法，请看

https://blog.csdn.net/hangGe0111/article/details/81101621