微信小程序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 OFFICE控件测试代码
Dec 08 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
基于游标的分页接口实现代码示例
Nov 12 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
js仿淘宝放大镜效果
Dec 28 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获取域名的google收录示例
2014/03/24 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript 基本概念
2015/01/20 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python单元测试实例详解
2018/05/25 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
岳庙导游词
2015/02/04 职场文书
学生会招新宣传语
2015/07/13 职场文书
大学生受助感言
2015/08/01 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
Redis 异步机制
2022/05/15 Redis