微信小程序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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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与MySQL交互使用详解
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JavaScript数组复制详解
2017/02/02 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
村党支部公开承诺书
2014/05/29 职场文书
学习十八大演讲稿
2014/09/15 职场文书
企业法人代表证明书
2014/09/27 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
公务员年终个人总结
2015/02/12 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书