微信小程序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 创建对象和构造类实现代码
Jul 30 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
vue使用watch监听属性变化
Apr 30 Vue.js
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
人族 TERRAN 概述
2020/03/14 星际争霸
一个简单的PHP投票程序源码
2007/03/11 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
自我评价格式
2014/01/06 职场文书
人事部专员岗位职责
2014/03/04 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
幼儿发展评估方案
2014/06/11 职场文书
班级心理活动总结
2014/07/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
公司员工奖惩制度
2015/08/04 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis