微信小程序 轮播图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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 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生成PDF文件的几个开源项目介绍
2014/11/17 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python映射拆分操作符用法实例
2015/05/19 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python根据成绩分析系统浅析
2019/02/11 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
会议新闻稿
2015/07/17 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android