微信小程序如何调用图片接口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通过className来获取元素的简单示例代码
Jan 10 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
js实现无缝循环滚动
Jun 23 Javascript
angular十大常见问题
Mar 07 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
JS中的继承操作实例总结
Jun 06 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
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python读取xml文件方法解析
2020/08/04 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
经贸日语专业个人求职信范文
2014/04/29 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年审计工作总结
2014/11/17 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书