小程序swiper组件修改默认指示点

小程序swiper组件修改默认指示点_第1张图片

html


    
      
        
          
        
      
    

    
      
        
      
    
  

js


const app = getApp()
Page({
  data: {
    slider: [{
        picUrl: '../../images/icon-swiper1.jpg'
      },
      {
        picUrl: '../../images/icon-swiper2.jpg'
      },
      {
        picUrl: '../../images/icon-swiper3.jpeg'
      },
      {
        picUrl: '../../images/icon-swiper4.jpg'
      },
    ],
    windowHeight: "",
    windowWidth: "",
    swiperCurrent: 0,
    autoplay: true,
    interval: 5000,
    duration: 500,
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
 
  fn(e) {
    this.setData({
      swiperCurrent: e.currentTarget.dataset.i
    })
    console.log(e)
  },
  swiperChange: function(e) {
    // console.log(e)
    this.setData({
      swiperCurrent: e.detail.current
    })
  },


})

css

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

有帮助到大家的关注我

会一直更新小程序常用技术及新玩法。

 

喜欢上方小程序,需要源码的,添加博主微信私信小编.

你可能感兴趣的:(小程序,微信小程序开发)