小程序實現輪播圖
本文實例為大傢分享瞭小程序實現輪播圖的具體代碼，供大傢參考，具體內容如下
那個先上效果：
step1:頁面index.wxml代碼
<!-- 輪播 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
<block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
<swiper-item>
<image src='{{item.image}}' class='u-img-slide' ></image>
</swiper-item>
</block>
</swiper>
step2:配置信息也就是index.js
Page({
data: {
bnrUrl: [],
},
onLoad: function () {
// 輪播
wx.request({
url: 'https://locally.uieee.com/slides',
success (res) {
// console.log(res.data)
this.setData({
icons:res.data
})
})
})
step3:樣式文件 index.wxss
/* 輪播 */
.u-wrp-bnr {
width: 100%;
height: 300rpx;
display: block;
position: relative;
/* top: rpx; */
background: #f0f0f0;
}
.u-img-slide {
width: 100%;
height: inherit;
/* 繼承夫類的高 */
}
然後就是wx.require({})中傳遞一個對象，這個對象的屬性分別對應不同的含義
wx.request({
url: 'test.php', //僅為示例，並非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
})
下面解釋一下：
url：請求地址，必填
data：請求的參數
method：HTTP 請求方法，默認為get
dataType：返回的數據格式，默認為json
success：接口調用成功的回調函數
fail：接口調用失敗的回調函數
complete：接口調用結束的回調函數（調用成功、失敗都會執行）
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。