分享下自己写的一个微信小程序请求远程数据加载到页面的代码
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>
分享下自己写的一个微信小程序请求远程数据加载到页面的代码的更多相关文章
- 微信小程序web-view之动态加载html页面
官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上 ...
- 微信小程序开发动感十足的加载动画--都在这里!
代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程序的图片懒加载
在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...
- 微信小程序实现滚动分页加载更多
参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:le ...
- 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。
<swiper-item> <image src="{{item.image}}" class="slide-image" mode=&quo ...
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
- 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...
- 微信小程序请求数据
微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...
随机推荐
- ZXX43大神实现的软渲染
https://github.com/zxx43/Software-Render http://blog.csdn.net/zxx43/article/details/46755247 http:// ...
- SQL-44 将id=5以及emp_no=10001的行数据替换成id=5以及emp_no=10005,其他数据保持不变,使用replace实现。
题目描述 将id=5以及emp_no=10001的行数据替换成id=5以及emp_no=10005,其他数据保持不变,使用replace实现.CREATE TABLE IF NOT EXISTS ti ...
- SQL-42 删除emp_no重复的记录,只保留最小的id对应的记录
题目描述 删除emp_no重复的记录,只保留最小的id对应的记录.CREATE TABLE IF NOT EXISTS titles_test (id int(11) not null primary ...
- get 乱码解决方案
1.针对Post方式提交的请求如果出现乱码,可以每次在request解析数据时设置编码格式: request.setCharacterEncoding("utf-8"); 也可以使 ...
- ceph存储集群性能测试工具步骤(初稿)
一.源码安装fio工具: #yum install libaio-devel make #wget http://brick.kernel.dk/snaps/fio-2.2.10.tar.gz #ta ...
- wpf-X名称空间Attribute
1.x:class 该属性用于 后台代码与前端xaml代码连接 代码实例如下图 2.x:ClassModifier 该属性用于控制可见级别 public 等 与C#中的可见级别相同 internal ...
- webpack 3.X研究
目前webpack已经到了3.X版本,为了方便通过最新版本打包整个前端应用,现在开始对webpack操作进行简单介绍. 一.webpack安装 在安装webpack之前需要注意,webpack是通过n ...
- PHP is_writeable 存在bug , 写一个自定函数 判断文件是否可写
$is_w = function($file){ if(DIRECTORY_SEPARATOR == '/' and @ini_get('safe_mode')==false){ return is_ ...
- cordova热更新插件的使用:cordova-hot-code-push-plugin
1. 添加插件:cordova plugin add cordova-hot-code-push-plugin 2. 先打开cli,执行命令 npm install -g cordova-hot-co ...
- POJ1821 Fence
题意 Language:Default Fence Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 6478 Accepted: ...