微信小程序轮播图swiper详解及实例（源码下载）

更新时间：2017年01月11日 15:04:58 投稿：lqh

这篇文章主要介绍了微信小程序轮播图swiper详解及实例（源码下载）的相关资料,实用小技巧自定义轮播图swiper dots默认样式，需要的朋友可以参考下

微信小程序 swiper 轮播图

前言：

1.更新了v0.12的版本后，每次保存都弹出来一个打开文件窗口。

2.swiper组件的属性indicator-dots，值为false时，面板指示点还是显示。要把indicator-dots属性直接删掉。

下面进入正题：默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。。。。

首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下：

<view class="swiper-container">
 <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
  <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item>
    <image src="{{item.picUrl}}" class="img"></image>
   </swiper-item>
  </block>
 </swiper>
 
 <view class="dots">
  <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
  </block>
 </view>
</view>

然后是wxss代码：

.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属性绑定对应的事件：

Page({
data: {
  slider: [
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},
  {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},
  ......
  ],
  swiperCurrent: 0,
},
swiperChange: function(e){
  this.setData({
    swiperCurrent: e.detail.current
  })
}
})

效果预览：

项目地址：http://xiazai.jb51.net/201701/yuanma/wx_qqmusic-master(jb51.net).rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

JavaScript实现优先级队列
这篇文章主要介绍了JavaScript如何实现优先级队列，在计算机里，队列是一种先进先出的数据结构。就跟我们平时排队一样，先到的排在前面，前面的优先处理，下面我们就来看看在JavaScript里面的优先队列又当如何
2021-12-12
JS前端画布与组件元信息数据流示例详解
这篇文章主要为大家介绍了JS前端画布与组件元信息数据流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
JavaScript流程控制（分支）
这篇文章主要介绍了JavaScript流程控制
2021-12-12
javascript的setTimeout()使用方法总结
这篇文章主要给大家分享javascript的setTimeout()使用方法总结，js的setTimeout方法用处比较多，通常用在页面刷新了、延迟执行了等等，下面我们一起来看看文章对该内容的具体总结吧,需要的朋友可以参考一下
2021-11-11
详解使用koa2完成Excel导入导出
这篇文章主要为大家介绍了详解使用koa2完成Excel导入导出示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
使用JavaScript练习动画最好的方式封面过渡
这篇文章主要为大家介绍了使用JavaScript练习动画最好的方式封面过渡实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
微信小程序数据绑定详解及实例
这篇文章主要介绍了微信小程序数据绑定详解及实例的相关资料,需要的朋友可以参考下
2016-10-10
微信小程序实现动态显示和隐藏某个控件
这篇文章主要介绍了微信小程序实现动态显示和隐藏某个控件的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序页面传值实例分析
这篇文章主要介绍了微信小程序页面传值实例分析的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序页面间通信的5种方式
这篇文章主要介绍了微信小程序页面间通信的5种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03