生命不息,代码不止.
在Android的项目完成后,接下来的半个月,要完成一款配套的微信小程序.
那就开始动手呗.
小程序的轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序的轮播图呢
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
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.index.wxss
/**index.wxss**/.swiper { height: 400rpx; width: 100%;}.swiper image { height: 100%; width: 100%;}附一下官方文档的地址:
微信小程序轮播组件官方文档
看一下最终效果.妥了
