博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第五篇、微信小程序-swiper组件
阅读量:5166 次
发布时间:2019-06-13

本文共 1349 字,大约阅读时间需要 4 分钟。

常用属性:

 

效果图:

 

swiper.wxml添加代码:

自动切换时间间隔
滑动动画时长

 

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;}

 

转载于:https://www.cnblogs.com/HJQ2016/p/5988671.html

你可能感兴趣的文章
LintCode刷题笔记-- Count1 binary
查看>>
java webcontroller访问时报415错误
查看>>
qcow2、raw、vmdk等镜像格式
查看>>
.NET:CLR via C# Assembly Loading
查看>>
wed开发基础--练习题
查看>>
【springBoot】之配置文件application
查看>>
那些年我们一起犯过的错
查看>>
js 正则表达式 验证小数点后几位
查看>>
箭头与点的区别
查看>>
[华为]统计大写字母个数
查看>>
CentOS安装rar及用法
查看>>
浅谈UitextField值变化的实时监视
查看>>
PHP原生文件上传(单文件多文件均可)简单案例
查看>>
智能手机音频信息取证
查看>>
倒计时计算
查看>>
listView加载在Dialog里面
查看>>
夺命雷公狗---memcache NO:05 分布式的内存对象缓存系统的配置
查看>>
WP开发图片保存到独立存储并从独立存储中读取
查看>>
TYVJ-P1864 守卫者的挑战 题解
查看>>
【福利】论机房如何关闭方正软件保护卡
查看>>