分享下自己写的一个微信小程序请求远程数据加载到页面的代码
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 ...
随机推荐
- np.newaxis
http://blog.csdn.net/mameng1/article/details/54599306
- 剑指Offer 23. 二叉搜索树的后序遍历序列 (二叉搜索树)
题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 题目地址 https://www.nowcoder ...
- Angular新手容易碰到的坑
在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助.这个文章将来会随时更新,不会单独开新章,欢迎各位订阅. Q1.<div ng-incl ...
- day02python 整型 布尔
今日内容 int bool 详细内容 1.整型(int) Py2 32位电脑 64位电脑 超出范围后python将自动转换成long(长整型) /运算不能显示小数-> (整形除法只能保留整数位) ...
- 2018.4.25 github创建新项目
echo "# IntegrateDemo" >> README.md git init git add README.md git commit -m "f ...
- list基本代码
#include<iostream> #include<list> //STL之list的基本用法 using namespace std; void outputList(l ...
- 关于函数式编程(Functional Programming)
初学函数式编程,相信很多程序员兄弟们对于这个名字熟悉又陌生.函数,对于程序员来说并不陌生,编程对于程序员来说也并不陌生,但是函数式编程语言(Functional Programming languag ...
- cordova打开文件系统插件的使用: cordova-plugin-file-opener2
1. 添加插件:cordova plugin add cordova-plugin-file-opener2 2. 调用方法: var target="/sdcard/Download/io ...
- js中常用的内置对象
Arguments 函数参数集合 arguments[ ] 函数参数的数组 Arguments 一个函数的参数和其他属性 Arguments.callee 当前正在运行的函数 Argument ...
- np金融量化分析
在所有的np中都是已返回值的形式进行修改的,否则不会修改 只是显示内容 形状是三维数据 全0数组 reshape也可以将二维的变成一维的 下标和切片 一维的切片 二维切片 . 列表切片 给一个数组 ...