微信小程序如何调用新闻接口实现列表循环


Posted in Javascript onJuly 02, 2019

找到了一个比较好用的新闻接口

1:首先写js,老样子

用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量。

Page({
 data: {
  // 3:需在data中声明一个接收数据的变量。
  list: []
 },
 onLoad: function (options) {
  wx.request({
   url: 'https://www.apiopen.top/journalismApi',
   header: {
    'content-type': 'application/json'
   },
   success: res => {
    //1:在控制台打印一下返回的res.data数据
    console.log(res.data)
    //2:在请求接口成功之后,用setData接收数据
    this.setData({
      //第一个data为固定用法,第二个data是json中的data
     list: res.data.data
    })
   }
  })
 },
})

我在 this.setData里面写的, list: res.data.data, 第一个data为固定用法,第二个data是json中的data,因为新闻列表里面的所有的json数据都是放在data里面了。

微信小程序如何调用新闻接口实现列表循环

2:css我就不多说了

.item {
 width: 100%;
 height: 186rpx;
 position: relative;
 display: flex;
 margin: 10rpx 10rpx;
 border-bottom: 1px solid rgb(197, 199, 199);
}
.item .number-wrapper {
 height: 100%;
 flex: 1;
 display: flex;
 flex-direction: column;
}
.item .img {
 width: 150rpx;
 height: 150rpx;
 padding: 20rpx;
}
.number-wrapper .name {
 margin: 10rpx 40rpx 20rpx 10rpx;
 font-size: 35rpx;
 overflow: hidden;
}
.count {
 font-size: 34rpx;
}

3:然后最重要的就是数据渲染

在wxml里面进行操作,首先是循环列表,那就要写一个wx:for列表渲染,然后在取出自己想要的数据,这里想要取出图片,标题和时间,根据json的数据结构来解析即可。

<view wx:for="{{list.auto}}" wx:key="index">
 <view class="item">
  <image class="img" src="{{item.picInfo[0].url}}" mode="scaleToFill"></image>
  <view class="number-wrapper">
   <text class="name">{{item.title}}</text>
   <view class="count-wrapper">
    <text class="count">{{item.ptime}}</text>
   </view>
  </view>
 </view>
</view>

最重要的是图片的解析,完成之后,可以看到,接口数据已经渲染在前端界面了,这个时候已经完成了小程序调用新闻列表实现列表循环这个需求啦。

微信小程序如何调用新闻接口实现列表循环

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

Javascript 相关文章推荐
前台js调用后台方法示例
Dec 02 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
javascript常见操作汇总
Sep 03 Javascript
动态加载jQuery的方法
Jun 16 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
jQuery文字轮播特效
Feb 12 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
Vue的路由及路由钩子函数的实现
Jul 02 #Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 #Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 #Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 #Javascript
简单了解微信小程序的目录结构
Jul 01 #Javascript
You might like
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
js跳转页面方法总结
2014/01/29 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
Python实现单词拼写检查
2015/04/25 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python解包概念及实例
2021/02/17 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
安全生产实施方案
2014/02/23 职场文书
高二学生评语大全
2014/04/25 职场文书
村抢险救灾方案
2014/05/09 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
中专生自荐信
2014/06/25 职场文书
毕业生找工作求职信
2014/08/05 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
责任书格式
2019/04/18 职场文书
原生JS实现分页
2022/04/19 Javascript