3、微信小程序开发のswiper图片组件
2019-07-10 本文已影响0人
郑先森
微信小程序中的swiper图片组件主要是代码很简单。
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: 'https://img04.sogoucdn.com/app/a/100520093/66ccbe631f3b0ce2-06138918aa1f7763-69f5926dc0b97baf69c3f7c84f3067c8.jpg' },
{ url: 'https://a2.att.hudong.com/53/51/16300000178518124461515846560_950.jpg' },
{ url: 'http://pic19.nipic.com/20120210/9335935_195635332170_2.jpg' },
{ url: 'http://img.sucai.redocn.com/attachments/images/201003/20100302/20100227_5118efc039e755357f07BFdWDJN9cxbY.jpg' }
]
},
onLoad: function () {
}
})
3.WXML
/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
image.png
更多详情请访问官方
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html