微信小程序 swiper组件轮播图详解及实例


Posted in Javascript onNovember 16, 2016

微信小程序 swiper组件轮播图

 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

微信小程序 swiper组件轮播图详解及实例

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

<!--index.wxml-->  
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
   <block wx:for="{{movies}}" wx:for-index="index">  
    <swiper-item>  
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
    </swiper-item>  
   </block>  
  </swiper>

这里有几个属性需要说明.

微信小程序 swiper组件轮播图详解及实例

微信小程序开发的循环用到了<block wx:for >

我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
 data: {  
  movies:[  
  {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
  {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
  ]  
 },  
 onLoad: function () {  
 }  
})

3.WXML

/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

WXSS不多说,跟CSS没啥区别.

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

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
js创建数组的简单方法
Jul 27 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
input框中的name和id的区别
Nov 16 #Javascript
微信小程序 页面传参实例详解
Nov 16 #Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 #Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
You might like
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP7新功能总结
2019/04/14 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
javascript实现画板功能
2020/04/12 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python实现控制台输出颜色
2021/03/02 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
公益广告语集锦
2014/03/13 职场文书
药剂专业自荐书
2014/06/20 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
同意报考证明
2015/06/17 职场文书
体育教师研修感悟
2015/11/18 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers