微信小程序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 03 Javascript
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
在JavaScript中如何使用宏详解
May 06 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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
JavaScript 乱码问题
2009/08/06 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python简单日志处理类分享
2015/02/14 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Django开发的简易留言板案例详解
2018/12/04 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python print不能立即打印的解决方式
2020/02/19 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python 如何快速复制序列
2020/09/07 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
weblogic面试题
2016/03/07 面试题
什么是.net
2015/08/03 面试题
编辑个人求职信范文
2013/09/21 职场文书
大型活动策划方案
2014/01/12 职场文书
体育馆的标语
2014/06/24 职场文书
自主招生自荐信格式
2015/03/04 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL