三分钟实现微信小程序轮播图「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

生命不息,代码不止.

在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