微信小程序如何调用图片接口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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JScript的条件编译
May 29 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 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
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP实现简单的计算器
2020/08/28 PHP
关于js类的定义
2011/06/28 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python日志logging模块使用方法分析
2019/05/23 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
pygame实现五子棋游戏
2019/10/29 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
2015年上半年物业工作总结
2015/03/30 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书