专栏首页编程微刊小程序调用图片接口API并居中显示

小程序调用图片接口API并居中显示

写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面 https://www.jianshu.com/p/5bbe8fb72c7c,顺便再调用了一下美图的接口API:

美图API:https://www.apiopen.top/api.html#feb14cd9ff0a4e4e9eda897858f30f21 url:https://api.apiopen.top/getImages

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',

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue移动端框架Mint UI教程-数据渲染到页面(六)

    拿到res.data之后,要赋值给page实例里面的data 所以在data里面设置一个默认的空数组

    王小婷
  • 【前端统计图】echarts多条折线图和横柱状图实现

    王小婷
  • echarts同一页面四个图表切换的js数据交互

    王小婷
  • 接口返回图片二进制流前端展示

    咋一看,不是base64格式,二十二进制的图片流数据,前端要想展示,只需要转换数据格式为base64即可。

    用户1141560
  • 神奇的go语言(面向对象)

    有过C++语言学习经历的朋友都知道,面向对象主要包括了三个基本特征:封装、继承和多态。封装,就是指运行的数据和函数绑定在一起,C++中主要是通过this指针来完...

    李海彬
  • 知乎模拟登陆

    经常在简书上写作,写完后再发布到其他网站,非常麻烦,所以准备搞一下自动发布文章的工具。那么第一步先要模拟登陆几个网站。今天先从知乎开始。

    星星在线
  • Python爬虫入门教程 12-100 半次元COS图爬取

    今天在浏览网站的时候,忽然一个莫名的链接指引着我跳转到了半次元网站 https://bcy.net/ 打开之后,发现也没有什么有意思的内容,职业的敏感让我瞬间...

    梦想橡皮擦
  • error: PyThreadState {aka struct _ts} has no member named exc_type

    这是因为你使用的Cython的版本与生成.c文件的版本不一致,此时应该使用Cython重新的生成.c文件。但是你会发现你重新生成的时候依然回报错。主要因为当目录...

    于小勇
  • 【JAVA零基础入门系列】Day14 Java对象的克隆

      今天要介绍一个概念,对象的克隆。本篇有一定难度,请先做好心理准备。看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充。   克隆...

    弗兰克的猫
  • Spring Security详解 顶

    2020-01-05 01:57:16.482 INFO 3932 --- [ main] .s.s.UserDetailsService...

    算法之名

扫码关注云+社区

领取腾讯云代金券