1  思路整理

就是页面加载完毕的时候  请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环

2 js相关代码  我是改的 onload函数

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;//这里注意,要不然setData不可用
wx.request({
url: 'http://****/index.php/Home/Wechat/index', // 仅为示例,并非真实的接口地址 header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data) that.setData({
datalist: res.data,
})
}
})
},

3  模板页面直接循环即可

    <view wx:for="{{datalist}}" class="scroll-view-item-01">
<view class="item_01" bindtap="bindViewDetailTap">
{{item.title}}
</view>
<view class="item_02">
{{item.time}}
</view>
</view>

分享下自己写的一个微信小程序请求远程数据加载到页面的代码的更多相关文章

  1. 微信小程序web-view之动态加载html页面

    官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上 ...

  2. 微信小程序开发动感十足的加载动画--都在这里!

    代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序开发——模板中加载html代码

    最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...

  4. 微信小程序的图片懒加载

    在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...

  5. 微信小程序实现滚动分页加载更多

    参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:le ...

  6. 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。

    <swiper-item> <image src="{{item.image}}" class="slide-image" mode=&quo ...

  7. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  8. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  9. 微信小程序请求数据

    微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...

随机推荐

  1. poj1873(枚举+凸包)

    The Fortified Forest Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 7291   Accepted: 2 ...

  2. angular5理解生命周期

    先来看下文档: 按照顺序有八个: 1.ngOnChanges()=>简单理解为当数据绑定输入属性的值发生变化时调用: 2.ngOnInit() => 在调用完构造函数.初始化完所有输入属性 ...

  3. Gram格拉姆矩阵在风格迁移中的应用

    Gram定义 n维欧式空间中任意k个向量之间两两的内积所组成的矩阵,称为这k个向量的格拉姆矩阵(Gram matrix) 根据定义可以看到,每个Gram矩阵背后都有一组向量,Gram矩阵就是由这一组向 ...

  4. 《Java编程思想》读书笔记-对象导论

    计算机是头脑延伸的工具,是一种不同类型的表达媒体.本文以背景性的和补充性的材料,介绍包括开发方法概述在内的面向对象程序设计(Object-oriented Programming,OOP)的基本概念. ...

  5. Linux下,用命令进行 日志分割、日志合并

    指定文件大小分割: split -b 10m catalina.out imsoft 以每个文本文件10M方式分割日志 文件合并: cat small_file* > large_file

  6. day03字符串

    字符串 1.方法详细内容 方法 强制转换 ##### 1.大小写转换 Value.upper() / value.lower() new_value=value.upper() print(new_v ...

  7. 421. Maximum XOR of Two Numbers in an Array

    这题要求On时间复杂度完成, 第一次做事没什么思路的, 答案网上有不贴了, 总结下这类题的思路. 不局限于这个题, 凡是对于这种给一个  数组,  求出 xxx 最大值的办法, 可能上来默认就是dp, ...

  8. 优雅的使用列表推导式和lambda

    按照条件过滤列表中的数据 过滤出列表中以"KLL","KBB","KHH"开头的数据 1.使用列表推导式 [orderNoOrReturnN ...

  9. Django学习笔记之数据库-QuerySet_API

    QuerySet API 我们通常做查询操作的时候,都是通过模型名字.objects的方式进行操作.其实模型名字.objects是一个django.db.models.manager.Manager对 ...

  10. 单源最短路径Dijkstra算法,多源最短路径Floyd算法

    1.单源最短路径 (1)无权图的单源最短路径 /*无权单源最短路径*/ void UnWeighted(LGraph Graph, Vertex S) { std::queue<Vertex&g ...