1.

场景：我们需要根据设计图来做一个轮播组件，然后自定义轮播指示点。

2.

官网的轮播组件swiper属性详解：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html前言：要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）。

一、自定义swiper组件和指示点1、在components/swiper/swiper.wxml封装组件!--components/swiper/swiper.wxml--!--这是一个普通的轮播--viewclass"container"swiperclass"swiper-box"bind:change"swiperChange"interval"4000"circularautoplayblockwx:for"{{swiperList}}"wx:key"{{index}}"swiper-itemimageclass"targetImg"src"{{item}}"mode"aspectFill"/image/swiper-item/block/swiper!--重置小圆点的样式--viewclass"dots"viewclass"dotsBox"style'width:{{(swiperList.length*26+swiperList.length*10)+"rpx"}}'!--viewclass"dotsBox"style'width:180rpx'--blockwx:for"{{swiperList}}"wx:key"{{index}}"textclass"dot{{indexcurrentIndex?'dot-active':''}}"/text/block/view/view/view2、在components/swiper/swiper.wxss书写组件样式/*component/swiper/swiper.wxss*/.container{position:relative;background:#ffffff;}.swiper-box{width:750rpx;height:560rpx;}.targetImg{width:100%;height:560rpx;}/*小圆点*/.dots{width:100%;height:4rpx;display:flex;position:absolute;bottom:30rpx;}.dotsBox{height:4rpx;display:flex;margin:0auto;}/*未选中时的小圆点样式*/.dot{width:26rpx;height:4rpx;border-radius:2rpx;margin-right:10rpx;background-color:#ffffff;opacity:0.4;}/*选中以后的小圆点样式*/.dot-active{opacity:1;}3、在components/swiper/swiper.js写组件逻辑代码Component({properties:{swiperList:{type:Array,value:[//默认数据（可以从引用组件处的属性传入该属性值）"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u1352235627,3071480959fm15gp0.jpg","https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u524661168,971104595fm26gp0.jpg","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u2162464902,1813581798fm26gp0.jpg","https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u2197586356,1203513576fm15gp0.jpg","https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u957308583,1357713210fm26gp0.jpg"]}},data:{currentIndex:0//初始高亮下标},methods:{/*这里实现控制自定义轮播指示点高亮*/swiperChange(e){this.setData({currentIndex:e.detail.current})}}})二、使用自定义的swiper组件1、在使用页面的json文件中进行引用声明。//pages/index/index.json{"usingComponents":{"w-swiper":"/components/swiper/swiper"}}2、在页面的wxml中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。!--pages/index/index.wxml--viewclass"wrap"w-swiper//view3.

————————————————————————————————————

4.

ps：本示例中的components和pages是在同一级目录。