【移動應(yīng)用開發(fā)技術(shù)】微信小程序如何實現(xiàn)聯(lián)網(wǎng)請求的輪播圖

【移動應(yīng)用開發(fā)技術(shù)】微信小程序如何實現(xiàn)聯(lián)網(wǎng)請求的輪播圖

這篇文章主要介紹了微信小程序如何實現(xiàn)聯(lián)網(wǎng)請求的輪播圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。微信小程序的輪播圖和Android的輪播圖一點(diǎn)不一樣，這里我們看一下我們需要用到的控件介紹這里我們用到了swiper這個組件，上邊的圖片已經(jīng)把這個組件的屬性都列出來了我們用的時候直接用就可以了接下來，再看一下網(wǎng)絡(luò)請求的API,這里我們用到的是GET請求，我們開一下微信小程序官方給我們的API接下來就是開啟我們小程序輪播圖之旅了，附上一張效果圖首先，我們看一下我們的index.wxml文件<view>

<swiper

class="swiper_box"

indicator-dots="{{indicatorDots}}"

vertical="{{vertical}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

bindchange="swiperchange">

<block

wx:for="{{images}}">

<swiper-item>

<image

src="{{item.picurl}}"

class="slide-image"

/>

</swiper-item>

</block>

</swiper>

</view>index.js文件var

app

=

getApp()

Page({

/**

*

頁面的初始數(shù)據(jù)

*/

data:

{

//是否顯示指示點(diǎn)

true

顯示

false

不顯示

indicatorDots:

true,

//控制方向

vertical:

false,

//是否自動切換

autoplay:

true,

//自動切換時間間隔

interval:

3000,

//滑動動畫時長

duration:

1000,

},

/**

*

生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:

function

(options)

{

var

that

=

this

//調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)

app.getUserInfo(function

(userInfo)

{

//更新數(shù)據(jù)

that.setData({

userInfo:

userInfo

})

})

//網(wǎng)絡(luò)請求

GET方法

wx.request({

url:

'/wemall/slider/list',

method:

'GET',

data:

{},

header:

{

'Accept':

'application/json'

},

//成功后的回調(diào)

success:

function

(res)

{

console.log('11111'

+

res),

that.setData({

images:

res.data

})

}

})

}

})index.wxss這里就是簡單的控制了一下顯示的樣式.swiper_box

{

width:

100%;

}

swipe