微信小程序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 相关文章推荐
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
JS实现打砖块游戏
Feb 14 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中strlen和mb_strlen函数的区别
2014/03/07 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python ORM编程基础示例
2020/02/02 Python
详解Python中namedtuple的使用
2020/04/27 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
Linux操作面试题
2012/05/16 面试题
幼儿园家长会邀请函
2014/01/15 职场文书
骨干教师培训感言
2014/01/16 职场文书
科级干部考察材料
2014/02/15 职场文书
精彩广告词大全
2014/03/19 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技