怎样实现微信小程序自定义轮播？

　　微信小程序自定义轮播可以让小程序页面最终呈现的效果更美观，让用户拥有更好的小程序使用体验。那么微信小程序自定义轮播要怎么样实现呢?以下是小编找到的设置微信小程序自定义轮播所需要的小程序码，希望能够帮助到大家。

　　默认的小程序swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，微信小程序自定义轮播包括其他颜色的，椭圆形的，方形的等等。

　　怎么实现呢?首先当然是要禁用掉(直接删掉)swiper属*indicator-dots，再用view组件模拟dots，对应的代码如下：

　　然后是wxss代码：

　　[css] view plain copy print?

　　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: #f80;

　　}

　　再对swiper的bindchange属*绑定对应的事件：

　　[javascript] view plain copy print?

　　Page({

　　data: {

　　slider: [

　　{picUrl: '../../images/T003R720x288M000000rVobR3xG73f.jpg'},

　　{picUrl: '../../images/T003R720x288M000000j6Tax0WLWhD.jpg'},

　　{picUrl: '../../images/T003R720x288M000000a4LLK2VXxvj.jpg'},

　　],

　　swiperCurrent: 0,

　　},

　　swiperChange: function(e){

　　this.setData({

　　swiperCurrent: e.detail.current

　　})

　　}

　　})

　　以上就是实现微信小程序自定义轮播需要的小程序代码了，参照上述资料，大家应该都可以开发成功，只要出现了上图的效果，那就ok了。更多相关教程和资料请关注微信小程序商店。

　　微信小程序自定义loading组件显示载入动画方法

　　小程序自定义关键词怎么设置?小程序自定义关键词的问题

　　开发过程中能使用微信小程序自定义icon吗?