微信小程序swiper组件用法实例分析【附源码下载】


Posted in Javascript onDecember 07, 2017

本文实例讲述了微信小程序swiper组件用法。分享给大家供大家参考,具体如下:

关于视图容器swiper的详细内容可参考官方文档

先来看看运行效果:

微信小程序swiper组件用法实例分析【附源码下载】

index.js:

Page({
 data: {
  imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  ],
  indicatorDots: false,
  autoplay: false,
  interval: 5000,
  duration: 1000
 },
 changeIndicatorDots: function (e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function (e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function (e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function (e) {
  this.setData({
   duration: e.detail.value
  })
 }
})

index.wxml:

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" ></image>
      <text class="textindex">{{index}}</text>
    </swiper-item>
  </block>  
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots ({{indicatorDots}})</button>
<button bindtap="changeAutoplay"> autoplay ({{autoplay}})</button>
<slider bindchange="intervalChange" show-value min="2000" max="5000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="2000"/> duration

index.wxss:

.slide-image{  
  display: inline;
}
.textindex{
  position: absolute;
  top :20px;
  color: red;
}

附:完整实例代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 #Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 #Javascript
面包屑导航详解
Dec 07 #Javascript
谈谈JS中的!!
Dec 07 #Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 #Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
You might like
php实现的Cookies操作类实例
2014/09/24 PHP
PHP自定义错误用法示例
2016/09/28 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python实现神经网络感知器算法
2017/12/20 Python
python opencv之SURF算法示例
2018/02/24 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python爬取网易云音乐评论
2018/11/16 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
python中tab键是什么意思
2020/06/18 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
搞笑获奖感言
2014/01/30 职场文书
购房协议书范本
2014/04/11 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
react 路由Link配置详解
2021/11/11 Javascript
TV动画《间谍过家家》公开PV
2022/03/20 日漫