微信小程序swiper轮播图组件使用方法详解

本文实例为大家分享了微信小程序swiper轮播图组件的使用，供大家参考，具体内容如下

在components中新建文件夹swiper

components/swiper/swiper.wxml

components/swiper/swiper.js

Component({
  properties: {
    swiperList: {
      type: Array,
      value: []// 默认数据（可以从引用组件处的属性传入该属性值）
    }
  },
  data: {
    currentIndex: 0  // 初始高亮下标
  },
  methods: {
    /* 这里实现控制自定义轮播指示点高亮 */
    swiperChange(e) {     
      this.setData({
        currentIndex: e.detail.current
      })      
    }
  }
})

components/swiper/swiper.wxss

/* components/swiper/swiper.wxss */
.container {
  position: relative;
}

.swiper-box {
  width: 100%;
  height: 364rpx;
}

.targetImg {
  width: 100%;
  height: 100%;
}

/*小圆点  */
.dots {
  width: 100%;
  height: 4rpx;
  display: flex;
  position: absolute;
  bottom: 30rpx;
}

.dotsBox {
  height: 4rpx;
  display: flex;
  margin: 0 auto;
}

/*未选中时的小圆点样式 */
.dot {
  width: 26rpx;
  height: 4rpx;
  border-radius: 2rpx;
  margin-right: 10rpx;
  background-color: #ffffff;
  opacity: 0.4;
}

/*选中以后的小圆点样式  */
.dot-active {
  opacity: 1;
}

在pages文件中引用

json文件中

{
  "usingComponents": {
    "w-swiper":"/components/swiper/swiper"
  }
}

html文件中

js文件中

data:{
    sprList:['/images/img.png','/images/img.png'],
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。