微信小程序 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 相关文章推荐
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JS如何在不同平台实现多语言方式
Jul 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
PHP数据库处理封装类实例
2016/12/24 PHP
php文件上传类的分享
2017/07/06 PHP
菜单效果
2006/10/14 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python全栈知识点总结
2019/07/01 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
会计工作态度自我评价
2015/03/06 职场文书
学校社团活动总结
2015/05/07 职场文书
七年级生物教学反思
2016/02/20 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js