欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序開發(fā)實現(xiàn)輪播圖

 更新時間：2022年06月24日 09:51:57   作者：開發(fā)者小埋  
這篇文章主要為大家詳細介紹了微信小程序開發(fā)實現(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序，移動端離不開輪播圖的功能，下面就寫一個小程序的輪播圖功能分享給大家

效果圖：

1.頁面代碼

<!--index.wxml-->
<view class="container">
? ? <!--輪播圖-->
? <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
? ? <block wx:for-items="{{lunboData}}">
? ? ? <swiper-item>
? ? ? ? <image src="{{item.imgurl}}" class="slide-image" />
? ? ? </swiper-item>
? ? </block>
? </swiper>
</view>

2.配置信息

//index.js
Page({
? data: {
? ? //輪播圖配置
? ? autoplay: true,
? ? interval: 3000,
? ? duration: 1200
? },
? onLoad: function () {
? ? var that = this;?
? ? var data = {
? ? ? "datas": [
? ? ? ? {
? ? ? ? ? "id": 1,
? ? ? ? ? "imgurl": "../../images/a1.jpg"
? ? ? ? },
? ? ? ? {
? ? ? ? ? "id": 2,
? ? ? ? ? "imgurl": "../../images/a2.jpg"
? ? ? ? }
? ? ? ]
? ? };?
? ? that.setData({
? ? ? lunboData: data.datas
? ? })
? }
})

3.配置樣式

/**index.wxss**/
?
/*輪播控件*/
?
.home-swiper {
? width: 95%;
? height: 360rpx;
}
?
.slide-image {
? width: 100%;
? height: 100%;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論