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

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

微信小程序 swiper组件轮播图

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

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

主要是代码也很简单.

1.index.wxml

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

微信小程序开发的循环用到了

我这里是遍历movies[]数组.就是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:/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没啥区别.

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。