微信小程序如何调用图片接口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创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 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手册及PHP编程标准
2006/12/17 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php写app用的框架整理
2019/09/29 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
发布你的Python模块详解
2016/09/15 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
python实现ip地址的包含关系判断
2020/02/07 Python
django修改models重建数据库的操作
2020/03/31 Python
python多进程使用函数封装实例
2020/05/02 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
军校大学生个人的自我评价
2014/02/17 职场文书
合作经营协议书
2014/04/17 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
员工年终考核评语
2014/12/31 职场文书
护士先进个人总结
2015/02/13 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记