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


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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
js控制table合并具体实现
2014/02/20 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
javascript实现微信分享
2014/12/23 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
详解Django配置优化方法
2019/11/18 Python
python下载的库包存放路径
2020/07/27 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
25道Java面试题集合
2013/05/21 面试题
统计系教授推荐信
2014/02/28 职场文书
信息技术课后反思
2014/04/27 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
店铺转让协议书
2014/12/02 职场文书