微信小程序如何調(diào)用圖片接口API并居中顯示
更新時間：2019年06月29日 11:43:13 作者：祈澈菇?jīng)?
這篇文章主要介紹了微信小程序如何調(diào)用圖片接口API并居中顯示,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
寫完調(diào)用天氣接口的demo之后，小程序調(diào)用天氣接口并且渲染在頁面，順便再調(diào)用了一下美圖的接口API：
wxml：
<view class='imagesize' wx:for="{{list}}" wx:key="index">
<image src="{{list.img}}" class='in-image' >
</image>
</view>
js：
Page({
data: {
list: []
},
onLoad: function (options) {
wx.request({
url: 'https://api.apiopen.top/getImages',
header: {
'content-type': 'application/json'
},
success: res => {
console.log(res.data)
this.setData({
//第一個data為固定用法，第二個data是json中的data
list: res.data.result[0],
})
}
})
},
})
css：
.imagesize {
display: flex;
justify-content: center;
}
.imagesize image {
width: 400rpx;
height: 400rpx;
}
注意
以上代碼里面每次刷新的時候，都會隨機(jī)調(diào)用接口數(shù)據(jù)
因為接口文檔里面有說明，傳0或者不傳會隨機(jī)推薦圖片
所以我們在掉接口的時候可以在url后面綁定參數(shù)：
url: 'https://api.apiopen.top/getImages?page=1&count=2',
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Express與NodeJs創(chuàng)建服務(wù)器的兩種方法
本文主要介紹了NodeJs創(chuàng)建Web服務(wù)器；Express創(chuàng)建Web服務(wù)器的兩種方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了5個JavaScript經(jīng)典面試題,這些面試題可能在各種公司的javascript面試中都會出現(xiàn),需要的朋友可以參考下2014-10-10
JavaScript通過字符串調(diào)用函數(shù)的實現(xiàn)方法
這篇文章主要介紹了JavaScript通過字符串調(diào)用函數(shù)的實現(xiàn)方法,實例分析了javascript動態(tài)調(diào)用函數(shù)的技巧,需要的朋友可以參考下2015-03-03
本文給大家介紹Bootstrap 對圖片的支持，Bootstrap提供了四個可對圖片應(yīng)用簡單樣式的class，對Bootstrap四種圖片class相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
BootStrap中Datepicker控件帶中文的js文件
bootstrap-datepicker 是一個非常優(yōu)秀的時間選擇插件。這篇文章主要介紹了bootstrap-datepicker帶中文的js文件的相關(guān)資料,需要的朋友可以參考下2016-08-08
JavaScript正則表達(dá)式中g(shù)標(biāo)志詳解
正則的思想都是一樣的,但是具體的寫法會有所不同,下面這篇文章主要給大家介紹了關(guān)于JavaScript正則表達(dá)式中g(shù)標(biāo)志的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好，需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧，對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12
這篇文章主要為大家介紹了uniapp如何使用定位過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
為了敘述簡單，這里僅拿width示例。獲取元素的offsetWidth/offsetHeight，減去元素的padding和border。2011-09-09
全角空格為12288，半角空格為32 其他字符半角(33-126)與全角(65281-65374)的對應(yīng)關(guān)系是：均相差65248 .2009-10-10