微信小程序 轮播图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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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定义参数数量可变的函数用法实例
2015/03/16 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
js日期对象兼容性的处理方法
2014/01/28 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Django中使用locals()函数的技巧
2015/07/16 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python匿名函数用法实例分析
2019/08/03 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
露营世界:Camping World
2017/02/02 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
北体毕业生求职信
2014/02/28 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
家长给学校的建议书
2014/05/15 职场文书
优秀家长事迹材料
2014/05/17 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
个人租房协议书范本
2014/09/30 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
详解OpenCV曝光融合
2022/04/29 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python