微信小程序 开发之滑块视图容器(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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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购物车实现代码
2011/10/10 PHP
关于php循环跳出的问题
2013/07/01 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python中__init__.py文件的作用详解
2016/09/18 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
公积金单位接收函
2014/01/11 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
火锅店的活动方案
2014/08/15 职场文书
学用政策心得体会
2014/09/10 职场文书