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

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

/* 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; }

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

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