微信小程序 轮播图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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JS实现的找零张数最小问题示例
Nov 28 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
详解vue中组件参数
Jul 09 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 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-Redis安装测试笔记
2015/03/05 PHP
php计算title标题相似比的方法
2015/07/29 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
实例浅析js的this
2016/12/11 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python中设置变量访问权限的方法
2015/04/27 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python mock测试的示例
2020/10/19 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
文秘专业自荐信
2013/10/14 职场文书
服装厂厂长职责
2013/12/16 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2016特色励志班级口号
2015/12/24 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis