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