微信小程序 开发之滑块视图容器(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 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue 实现的树形菜的实例代码
Mar 19 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 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添加MySQL数据记录代码
2008/06/07 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
Python编程实现使用线性回归预测数据
2017/12/07 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书