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


Posted in Javascript onJanuary 11, 2017

微信小程序 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
  })
}
})

效果预览:

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

项目地址:http://xiazai.3water.com/201701/yuanma/wx_qqmusic-master(3water.com).rar

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

Javascript 相关文章推荐
jQuery中:last选择器用法实例
Dec 30 Javascript
AngularJS快速入门
Apr 02 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue实现图片上传功能
May 28 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
小学生安全演讲稿
2014/04/25 职场文书
毕业生求职信范文
2014/06/29 职场文书
2014年内勤工作总结
2014/11/24 职场文书
荆州古城导游词
2015/02/06 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Python进程间的通信之语法学习
2022/04/11 Python