微信小程序如何调用图片接口API并居中显示


Posted in Javascript onJune 29, 2019

写完调用天气接口的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;
}

微信小程序如何调用图片接口API并居中显示

注意

以上代码里面每次刷新的时候,都会随机调用接口数据

因为接口文档里面有说明,传0或者不传会随机推荐图片

微信小程序如何调用图片接口API并居中显示

所以我们在掉接口的时候可以在url后面绑定参数:

url: 'https://api.apiopen.top/getImages?page=1&count=2',

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 #Javascript
pm2启动ssr失败的解决方法
Jun 29 #Javascript
localstorage实现带过期时间的缓存功能
Jun 28 #Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
You might like
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
js编写的treeview使用方法
2016/11/11 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
React优化子组件render的使用
2019/05/12 Javascript
python字符串连接方式汇总
2014/08/21 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
电气个人求职信范文
2014/02/04 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
linux下安装redis图文详细步骤
2021/12/04 Redis
python神经网络ResNet50模型
2022/05/06 Python