微信小程序 swiper组件详解及实例代码


Posted in Javascript onOctober 25, 2016

微信小程序 swiper组件

常用属性:

微信小程序 swiper组件详解及实例代码

效果图:

微信小程序 swiper组件详解及实例代码

 swiper.wxml添加代码:

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block>
</swiper>
<button bindtap="changeIndicatorDots"> 是否显示面板指示点 </button>
<button bindtap="changeAutoplay"> 是否自动切换 </button>
<slider bindchange="intervalChange" show-value min="1000" max="2000"/> 自动切换时间间隔
<slider bindchange="durationChange" show-value min="1800" max="10000"/> 滑动动画时长

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: 1000,
  duration: 1800
 },
 //是否显示面板指示点
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 //是否自动切换
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 //自动切换时间间隔
 intervalChange: function(e) {
  this.setData({
   // e.detail.value获取slider的值
   interval: e.detail.value
  })
 },
 //滑动动画时长
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 },
 //当页面改变是会触发
 bindchangeTag:function(e){
  console.log("bindchangeTag...")
 }, 
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

css:

.slide-image{
  width: 100%;
  height: 160px;
}

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
详解JavaScript对象类型
Jun 16 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 #Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 #Javascript
微信小程序 数据绑定详解及实例
Oct 25 #Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 #Javascript
javascript 中的事件委托详解
Oct 25 #Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
You might like
使用数据库保存session的方法
2006/10/09 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP数据类型的总结分析
2013/06/13 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
javascript实现循环广告条效果
2017/12/12 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python中的global关键字的使用方法
2019/08/20 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
pandas分批读取大数据集教程
2020/06/06 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
酒店副总经理岗位职责范本
2014/02/04 职场文书
士力架广告词
2014/03/20 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android