uniapp重新渲染页面_uni-app里面使用uni.request请求并且渲染列表
1:新建一个uniapp项目,命名为test。
2:官方网站找文档,要用到列表组件
导入之后,可以看到目录结构如下
3:打开index,开始写代码
使用方式列表的方式,在 script 中引用组件并且在 template 中使用组件 。
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {uniList,uniListItem}
}
index代码写好了参考如下:
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {uniList,uniListItem}
}
4:运行到浏览器
点击运行的菜单,运行到chrom浏览器里面。
运行成功,显示的界面效果,这个是静态的。
5:准备一个可以使用的接口
找了一个可以使用的接口,网上有很多免费的api接口,但是很多免费的接口都容易被攻击,很容易失效,在使用之前,请先点击去查看一下,接口是否是完整的。
6:开始写请求
这里是请求使用的一个方法uni.request(OBJECT):官方文档放在这里:https://uniapp.dcloud.io/api/request/request
官网的例子是这样的
示例
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
我们可以直接复制,放到自己的代码里面,并且把url修改成我上一步准备的接口数据。
index.vue代码如下
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {uniList,uniListItem},
data() {
return {
// productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: "https://unidemo.dcloud.net.cn/api/news",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
// this.productList = res.data;
},
});
},
}
}
写完代码之后,打开我们的控制台,可以看到请求的免费的api里面的数据,是请求成功了 的,在请求成功的success方法里面,写一个console.log(res.data),将数据打印在控制台方便查看。
7:开始赋值,渲染到前端界面
这个时候的步骤就不多说了,大家都非常的清楚,在data()里面定义一个空数组,将请求到的res.data赋值给空数组,然后进到view里面进行遍历,渲染数据到页面。
参考代码;
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {uniList,uniListItem},
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: "https://unidemo.dcloud.net.cn/api/news",
method: 'get',
dataType: 'json',
success: (res) => {
console.log(res.data);
this.productList = res.data;
},
});
},
}
}
效果就可以出来了
uniapp重新渲染页面_uni-app里面使用uni.request请求并且渲染列表相关推荐
- php和asp渲染页面,Vue.js与 ASP.NET Core 服务端渲染功能
在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js 服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.A ...
- uni-app实战之社区交友APP(17)账号模块和文章列表实现
文章目录 前言 一.账号登录交互实现 1.登录页面完善和账号密码登录实现 2.手机号和用户名登录实现 3.登录状态保持 4.退出登录交互实现 5.第三方登录交互实现 二.其他账号功能实现 1.修改账号 ...
- 浏览器渲染页面原理,reflow、repaint及其优化
浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - ...
- uniapp H5页面使用uni.request时,出现跨域问题
概述 HBuilderX 2.5.1 uniapp中提供了uni.request进行向http请求数据(可以理解为ajax请求). uni.request 不支持 jsonp. 一种办法是:在uni- ...
- uni-app发布H5页面跨域问题解决方法
uni-app提供了 最简单的 解决方案. 个人写的H5网页,因为没有服务器资源,所以需要经常调用其他网站的数据和资源,由于跨域问题,通常都无法访问其他网站.该方法非常适用于GET请求. 一.打开项目 ...
- uni app 调用网络打印机_uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法https://www.jianshu.com/p/bc62c9e1beed getList() { uni.request({url: &q ...
- 微信小程序request请求封装;微信小程序封装request请求;uni-app小程序封装request请求;
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
- uni.request接口封装;小程序uni-app接口封装
另一篇请求接口简单封装在api下的index.js 本片资源下载地址 本片封装了post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的reques ...
- uniapp:request 请求出现400错误
uniapp:request 请求出现400错误 开发需求:我们团队在使用 uniapp springboot 开发微信小程序项目,前端向后端发送request 请求时,前端爆出400错误. 400错 ...
- uniapp实现和webview中的H5进行通讯,返回跳出webview页面到app页面中
uniapp向webview中发送数据,通过打开的src在src后面拼接上想要的传送的数据,类似于前端的query的传值方式 <web-view @message="message&q ...
最新文章
- 为什么指针被誉为 C 语言灵魂?
- 在 emu8086 中学习汇编In,Out指令
- Python3各种进制之间的转换方法
- 清华姚班毕业生不配自信?张昆玮在豆瓣征女友,却被网友群嘲......
- 经典排序算法(11)——计数排序算法详解
- windows 查看网络中断事件_等保测评2.0:Windows安全审计
- 超棒的30款JS类库和工具
- 生产Spark Streaming 黑名单过滤案例
- 《第三方JavaScript编程》——1.4 第三方开发的挑战
- (转)区别不同浏览器,CSS hack写法
- Linux微信群shell,linux shell基础
- 利用匈牙利法求解指派问题
- c#入门经典第6版pdf百度云盘_C#入门经典第6版中文pdf_NET教程
- 三只松鼠、良品铺子、百草味隐藏的巨大套利机会
- matlab个版本介绍,matlab软件功能简要介绍及版本描述
- oracle recover database,recover database until cancel和 recover database区别
- 创业公司如何实施股权激励
- 但行好事,莫问前程。
- 安卓手机里的短信删除了如何恢复
- P2394 yyy loves Chemistry I
热门文章
- 傲腾内存 可以用ghost系统_光影精灵傲腾版笔记本安装win10系统操作教程
- ACL——拒绝源地址
- java-se-包装类
- 计算机基础知识如何打钩,打勾的符号怎么输入电脑上(对勾符号在word和Excel的输入方法)...
- 7-12 输出大写英文字母 (15 分)
- 1093-A+B for Input-Output Practice (V)
- 云孚开源情报系统YFINT
- Chrome不保留历史记录,常规模式下不保留历史记录
- 网页编程html报错502,Nginx将不会使用自定义502错误页面
- 快速读懂CAN报文 DBC文件 解析文件