mpvue自定义微信小程序indicator（指示点）样式

mpvue自定义微信小程序indicator（指示点）样式

效果图

HTML

<template>
  <div class="container">
    <swiper v-if="slideshowList" 
    @change="swiperChange" 
    :circular="circular"
    :current="cur"
    :indicator-dots="indicator"
    indicator-active-color="#fff"
    :previous-margin="nextMargin"
    :next-margin="nextMargin"
    :display-multiple-items="1"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
    class="swiperBox">
      <block v-for="(item, index) in slideshowList" :key="index" >
        <swiper-item @click="toCourse(item)" class="flex flex-main-center flex-cross-center ">
          <img 
            :src="item.imgUrl" 
            class="swiperImg newImg" 
            mode="aspectFill"/>
        </swiper-item>
     
      </block>
    </swiper>
    <div class="dots">  
      <div v-for="(item,index) in slideshowList.length" :index= "index" :key="key">  
          <div class="dot" :class="{'active':  index == newCurrent}"></div>  
      </div>  
    </div>
    
  </div>
</template>

script

<script>



export default {
  
  data () {
    return {
      circular:true, //是否采用衔接滑动
      indicator: false, //是否显示指示点
      autoplay: true, //是否自动切换
      interval: 4000,  //自动切换时间间隔
      duration: 400,  //滑动动画时长,
      // 当前索引
      newCurrent:0,
      nextMargin:'0'
    },
     // banner列表
      slideshowList: [
        {
          imgUrl: 'http://1872.img.pp.sohu.com.cn/images/blog/2009/2/18/15/23/12032671230g215.jpg'
        },
        {
          imgUrl: 'http://img22.mtime.cn/up/2011/03/14/143421.15956101_o.jpg'
        },
        {
          imgUrl: 'http://1872.img.pp.sohu.com.cn/images/blog/2009/2/18/15/23/12032671230g215.jpg'
        },
        {
          imgUrl: 'http://img22.mtime.cn/up/2011/03/14/143421.15956101_o.jpg'
        },
      ],
  },

  mounted(){
     
  },
  computed:{

  },
  methods: {
    //轮播图的切换事件  
    swiperChange (e) {
     
      this.newCurrent = e.target.current;
      // this.$emit('statusFor',e.target.current)
    }
  }
}
</script>

scss

<style scoped lang="scss">
.container{
  @include ellipsis(1);
  width: 100%;
  overflow: hidden;
  position: relative;
  left: 0;
  top: 0;
  z-index: 10;
}

.swiperBox{
  width: 100%;
  height: 422rpx;
  position:relative;
  overflow:hidden;
  margin:0 0 28rpx;
}
.swiperImg{
  width:690rpx;
  height: 366rpx;
  border-radius:4rpx;
  background-color:#F4F4F4;
  border-radius: 10rpx;
 
}
.newImg{
  width:690rpx;
  height: 396rpx;
}
.lastImg{
  width: 100%;
}
.dots{  
    width: 144rpx;
    height: auto;
    margin: 28rpx auto 0 auto;
    display: flex;
    justify-content: center;
}  
/*未选中时的小圆点样式 */
.dot{  
    margin-right: 8rpx;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #D8D8D8;
    float: left;
    transition: all .2s ease-in-out;
}  
/*选中以后的小圆点样式  */
.active{  
    width: 40rpx;
    height: 10rpx;
    background-color: #FF6565;
    float: left;
    border-radius: 6rpx;
} 
</style>