分享下自己写的一个微信小程序请求远程数据加载到页面的代码
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 ...
随机推荐
- jq demo 点击评分组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CLR via C#--------CLR的执行模式
CLR:是一个可由多种编程语言使用的“运行时”. CLR的核心功能(比如 内存管理.程序集加载.安全性.异常处理.线程同步)可由面向CLR的所有语言使用. CLR是完全围绕类型展开的. 面向CLR的语 ...
- browser-sync第一次打开提示路径错误,path.js应该输出字符串;之后重启一直提示插入代码片段,插入后无效依然提示
网上找到gulp类似提示,是node版本问题. nvm派上用场, browser-sync@2.23.6,node用的8.3.0 解决办法: nvm install 7.8.0 nvm use 7.8 ...
- alias-unalias
一.用一条命令完成创建目录/data/test,即在/目录下创建/data目录,及其子目录/data/test 解答:mkdir -p /data/test 实践过程: 二.已知/tmp目录下已经存在 ...
- Python学习二十八周(vue.js)
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
- linux下GCC编译文件
Linux终端使用技巧: Ctrl+Alt+T打开终端 Ctrl+c死循环退出程序 Shift+Ctrl+T:新建标签页 Shift+Ctrl+N:新建窗口 Shift+Ctrl+Q:关闭终端 终端中 ...
- Git源码安装 Linux指定安装目录
1.安装依赖包 $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel 2.下载最新版源码包https: ...
- AutoHotKey (AHK) 按键表+自定义快捷键简化操作的教程
自定义快捷键简化操作的教程 ① 下载安装AutoHotKey,并用记事本新建一个MyHotKey.ahk文件,录入如②中信息 ② 下图可以实现,按F6即可触发“Ctrl+C”的复制快捷键,同理F7可实 ...
- 10.python面向对象进阶功能
isinstance(obj,cls)和issubclass(sub,super)(1)isinstance(obj,cls)检查一个对象obj是否是一个类cls的实例(2)issubclass(su ...
- Day 10 函数的形参,实参
今日内容 '''实参:调用函数,在括号内传入的实际值,值可以为常量.变量.表达式或三者的组合*****形参:定义函数,在括号内声明的变量名,用来接受外界传来的值''''''注:形参随着函数的调用 ...