微信小程序 开发之滑块视图容器(swiper)详解及实例代码


Posted in Javascript onFebruary 22, 2017

微信小程序 开发之滑块视图容器详解

实现效果图:

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

实现起来特别简单,看看代码是怎么写的呢:

<swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:for-index="index">
  <swiper-item>
   <image src="{{item}}" class="side-img"></image>
  </swiper-item>
 </block>
</swiper>

这就是布局了,看一下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'],
    indcatorDots: true,
    autoPlay: true,
    interval: 5000,
    duration: 500
  },

,swiper有以下一些常用属性:

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

标记的两个属性暂时不管。

注意:其中只可放置组件,否则会导致未定义的行为。

swiper-item

仅可放置在组件中,宽高自动设置为100%。

就是这样,自己动手试试。

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

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 #Javascript
You might like
PHP无敌近乎加密方式!
2010/07/17 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
php语法检查的方法总结
2019/01/21 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
SQL Server面试题
2016/10/17 面试题
乡镇综治宣传月活动总结
2014/07/02 职场文书
单位在职证明书
2014/09/11 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Python使用永中文档转换服务
2022/05/06 Python