大家好，又见面了，我是你们的朋友全栈君。
生命不息,代码不止.
在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: 400 rpx ;
width: 100% ;
}
.swiper image {
height: 100% ;
width: 100% ;
}
附一下官方文档的地址:
微信小程序轮播组件官方文档
看一下最终效果.妥了
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143539.html原文链接：https://javaforall.cn
