更新记录

1.0.0（2019-09-28）

模板实现了swiper-dot样式的自定义，经常遇到原生swiper的样式不能满足需求，我简单实现了一个样式，如果有需要直接把使用示例拷贝到页面里面，可以在css里面直接修改成需要的样式

平台兼容性

使用示例

<template>
  <view class="container">
      <!-- 轮播 -->
      <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent" @change="changeSwiper">
          <swiper-item v-for="item in swiperImg" :key="item.id">
              <image class="swiper-item" :src="item" mode="widthFix"></image>
          </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <view class="dots">
          <block v-for="(item,index) in swiperImg.length" :key="item">
              <view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
          </block>
      </view>
  </view>
</template>

<script>
  export default {  
      data() {          
          return {              
              swiperImg: [
                  '../../static/swiper.png',
                  '../../static/swiper.png'
              ],
              current: 0,
              swiperCurrent: 0,
          };
      },
      methods: {
          changeSwiper(e) {
              this.swiperCurrent = e.detail.current;
          }
      }

  }
</script>

<style lang="scss">
  .container {
      position: relative;

      .swiper {
          width: 700rpx;
          height: 240rpx;
          border-radius: 16rpx;
          overflow: hidden;
          margin-top: 16rpx;
          position: relative;
          margin-left: 26rpx;

          .swiper-item {
              width: 700rpx;
              height: 240rpx;
              border-radius: 16rpx;
          }

      }

      .dots {
          position: absolute;
          bottom: 20rpx;
          left: 50%;
          // 这里一定要注意兼容不然很可能踩坑          
          transform: translate(-50%, 0);
          -webkit-transform: translate(-50%, 0);        
          z-index: 99;
          display: flex;
          flex-direction: row;
          justify-content: center;

          .dot {
              width: 24rpx;
              height: 8rpx;
              transition: all .6s;
              background: rgba(0, 0, 0, .3);
              margin-right: 10rpx;
          }

          .active {
              width: 24rpx;
              height: 8rpx;
              background: rgba(255, 255, 255, .8);
          }
      }
  }
</style>