大家好，又见面了，我是你们的朋友全栈君。
生命不息,代码不止.
在Android的项目完成后,接下来的半个月,要完成一款配套的微信小程序.
那就开始动手呗.
小程序的轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序的轮播图呢
1.index.wxml
<!
–index.wxml–
>
–index.wxml–
>
<
swiper
class=
“swiper”
indicator-dots=
“true”
autoplay=
“true”
interval=
“5000”
duration=
“1000”
>
swiper
class=
“swiper”
indicator-dots=
“true”
autoplay=
“true”
interval=
“5000”
duration=
“1000”
>
<
block
wx:for=
“{
{movies}}”
wx:for-index=
“index”
>
block
wx:for=
“{
{movies}}”
wx:for-index=
“index”
>
<
swiper-item
>
swiper-item
>
<
image
src=
“{
{item.url}}”
class=
“slide-image”
mode=
“aspectFill”/
>
image
src=
“{
{item.url}}”
class=
“slide-image”
mode=
“aspectFill”/
>
</
swiper-item
>
swiper-item
>
</
block
>
block
>
</
swiper
>
swiper
>
2.index.js
//index.js
//获取应用实例
var
app =
getApp()
app =
getApp()
Page(
{
{
data: {
movies:[
{
url:
‘http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg’
}
,
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/20130617/tooopen_21241404.jpg’
}
,
{
url:
‘http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg’
}
,
url:
‘http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg’
}
,
{
url:
‘http://img02.tooopen.com/images/20141231/sy_78327074576.jpg’
}
url:
‘http://img02.tooopen.com/images/20141231/sy_78327074576.jpg’
}
]
}
,
,
onLoad:
function ()
{
function ()
{
}
})
3.index.wxss
/**index.wxss**/
.swiper
{
{
height:
400
rpx
;
400
rpx
;
width:
100%
;
100%
;
}
.swiper
image
{
image
{
height:
100%
;
100%
;
width:
100%
;
100%
;
}
附一下官方文档的地址:
看一下最终效果.妥了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143539.html原文链接：https://javaforall.net
