微信小程序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 原型链学习总结
Oct 29 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
浅谈React组件之性能优化
Mar 02 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
网页右下角弹出窗体实现代码
2014/06/05 Javascript
javascript的函数作用域
2014/11/12 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
对python中各个response的使用说明
2020/03/28 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python实现异步IO的示例
2020/11/05 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
农业项目建议书
2014/08/25 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
单位接收证明格式
2015/06/18 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js