微信小程序如何调用图片接口API并居中显示
作者：祈澈菇凉 发布时间：2023-08-09 15:05:30
标签：微信,小程序,调用,图片,接口,API
写完调用天气接口的demo之后，小程序调用天气接口并且渲染在页面，顺便再调用了一下美图的接口API：
美图API
url
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;
}
注意
以上代码里面每次刷新的时候，都会随机调用接口数据
因为接口文档里面有说明，传0或者不传会随机推荐图片
所以我们在掉接口的时候可以在url后面绑定参数：
url: 'https://api.apiopen.top/getImages?page=1&count=2',
来源：https://www.jianshu.com/p/c5f971e7f252
0
投稿猜你喜欢
- 最近在做一个魔术网的div+css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记
在SQL中，很多威力都来自于将几个表或查询中的信息联接起来，并将结果显示为单个逻辑记录集的能力。在这种联接中包括INNER、LEFT、RIG- 问题：希望仅仅允许某个指定IP的计算机连接到SQL Server服务器，但不允许其他的客户端进行连接。解决方法如下：你可以直接在防火墙中做限
- 一个用asp来处理jmail发信的过程，及使用方法. 发信时，直接调用这个过程就行了，很方便。<％ dim
- 今天在GOOGLE上查图片资料，这一幕真让我纠结啊：使用【向前】【向后】这种说法，就默认了有一个对比坐标，那就是当前显示的4张缩略图。点击【
- 代码如下：<html> <head> &nb
- 1. ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,as
- 一些大型站点都有着非常一流的视觉外观，它们很可能在设计时使用了网格系统。网格可以是页面布局显得紧凑而且稳定，为设计师在设计站点时提供一个逻辑
- UPDATE语句的速度更新查询的优化同SELECT查询一样，需要额外的写开销。写速度依赖于更新的数据大小和更新的索引的数量。没有更改的索引不
- 107条javascript(js)常用的方法技巧，十分的实用，相信看了下面的这些js编程技巧和方法，能够给javascript初学者解决很
- 阅读上一篇教程：WEB2.0网页制作标准教程（10）自适应高度布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：样式表：#lo
- 继续Mootools常用方法扩展，依然还是String类的扩展。方法：unescapseHTML说明：这个上次忘了，和escapseHTML
- ajax.html <html><head> <met
- 以下的文章主要是对MySQL性能影响关系紧密的五大配置参数的介绍，我前几天在相关网站看见对MySQL性能影响关系紧密的五大配置参数的资料，觉
- 解决Microsoft VBScript 运行时错误 (0x800A0046) 没有权限的解决方案,0x800a0046错误。前段时间在做站
- 以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF1. document.form.item 问题
- 在IE浏览器调试代码，我们可以选择使用 IE WebDeveloper但是我个人用惯了ff浏览器下的firebug，所以在网上搜了一下，如果
- 代码如下:--函数 CREATE function fn_GetPy(@str nvarchar(4000)) returns nvarch
- 代码如下:create proc p_sword_getblcolumn ( @tblN
- 最近在做一个程序正好需要用到此方面，在网上找到过相应的程序，但用起来都非常恶，于是乎只好自己实现一个了。 首先实现两个函数用来操作光标：
