关于vue&uniapp 网络请求数据庞大导致页面数据未渲染

最新推荐文章于 2024-04-12 05:18:23 发布
最新推荐文章于 2024-04-12 05:18:23 发布
阅读量290 收藏
点赞数 1
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68716163/article/details/134630901
版权

我是用得v-if解决问题得，因为v-if是重建元素和销毁，也就是相当于我们等网络请求数据拿到以后再改变v-if里面得真假值，来控制元素得重建和销毁，这样元素就只会在我们拿到数据以后才重建元素，这样就不会出现因为数据的庞大导致页面得不到渲染。

讲这么多那我们来看看代码层：

页面层，因为不想数据没有的时候导致页面会显示的比较空所以我就拿了一个数据加载中的一个组件来提示用户。

这个是网络请求，等拿到数据以后改变判断值，让页面层通过v-if来进行一个判断是否重建元素

前端编程小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈vue异步数据影响页面渲染
10-16
今天小编就为大家分享一篇浅谈vue异步数据影响页面渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中实现先请求数据再渲染dom分享
08-27
下面小编就为大家分享一篇vue中实现先请求数据再渲染dom分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue或者uniapp修改数据后页面不重新渲染_uni 修改数据不生效
最新发布
m0_63174618的博客
04-12 275
【代码】vue或者uniapp修改数据后页面不重新渲染_uni 修改数据不生效。
vue keep-alive请求数据的方法示例
08-27
本篇文章主要介绍了vue keep-alive请求数据的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
vue如何从接口请求数据
08-30
本篇文章主要介绍了vue如何从接口请求数据 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中v－for批量渲染echart，没出来
luweisixsix的博客
03-18 1853
数据是动态的，所以用v-for，echart需要渲染元素，所以要先获取元素，但是mounted里面获取不到数据，异步数据的原因? 所以把数据赋值放在created或者unmounted中 ...
uniapp 开发小程序虚拟长列表万条数据不卡顿
weixin_38946164的博客
08-24 7716
虚拟列表 只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。当数据体量极大时，使用虚拟列表，可以极大减少节点的渲染，体验丝滑。
解决uniapp中数据请求到但是未渲染
zyl19950717的博客
07-06 3733
解决常见的uniapp中请求数据无法渲染的问题
问题：uniapp中增删改数据有变化但是为什么渲染不出来？
SunPeng的博客
06-07 684
uniapp中数据有变化但是为什么不渲染出来？
vue3 + Echarts 页面加载不渲染显示空白页面
技小白的博客
05-10 4414
vue3 Echarts 页面加载不渲染图表为空白
uni-app获取后台接口使用v-for双重循环渲染数据H5显示，app端不显示
四夕木木夕木木的博客
09-16 1万+
今天我获取后台接口，因为数据是二维数据，所以渲染到页面上我就使用了双重循环： <block v-for="(item, index) in tableList.data.maps" :key="item.staffId"> <view v-for="(itemList, indexList) in item.prod" :key="indexList"> <vi...
uni-app通过v-for渲染数据之后不能及时显示的问题
qq_41057938的博客
12-07 2438
我遇到的问题：用v-for遍历渲染图表，向数组中间插入一条chartData 数据，这条数据对应的图表不能正常显示。 解决方式： 1.通过this.$forceUpdate();强制刷新，有人说能够解决问题，可是通过这种方式我尚未解决，不知道问题出在哪儿，先记录下来。 2.在不刷新的节点外面包装一个view, 使用v-if来切换显示. 在需要刷新时,先使v-if为false,更新数据后再将v-if设置为true,视图就可以刷新出来. 同时需要检查本身代码是否有异常并且捕获了未打印,这样无论如何都不会刷
解决uniapp列表快速滑动页面数据空白问题
菜鸟老五
06-22 5026
解决上滑加载页面空白异常
uni-app页面、组件视图数据无法刷新问题的解决办法
热门推荐
红星的专栏
04-27 1万+
问题 先总结一下无法刷新页面或组件视图数据的可能原因： 数据本身的问题 没有为模块或组件创建 key 路由使用不当 （比如我现在碰到的问题，在登录的地方错误使用了 uni.navigateTo） 以我个人的经历，目前归结为此三点，本文主要探讨后两个问题的解决办法，当然可能还有其他问题， 欢迎各位同行与我交流。 场景 最近做一个教育类APP的二次开发，使用的是Uni-app，做的差不多的时候出现...
uniapp/vue虚拟列表，数据列表渲染优化
weixin_43818307的博客
11-04 4559
uniapp/vue虚拟列表，数据列表渲染优化
解决Vue刷新数据量过大而造成数据获取不到问题
weixin_43483324的博客
12-01 306
当使用Vuex存储数据时，刷新页面会导致数据丢失的问题是因为Vuex的状态是在内存中保存的，而不是持久化到本地存储。请注意，`vuex-persistedstate`默认使用`localStorage`作为存储引擎。要解决这个问题，你可以考虑将Vuex的状态持久化到本地存储中，以便在页面刷新后可以重新加载数据。通过以上步骤，Vuex的状态将会自动保存到本地存储中，并在页面刷新后重新加载。这样，每当页面刷新时，Vuex的状态将会从存储中加载，以便恢复之前保存的数据。// ...其他配置...
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。
海贼王某人的博客
09-19 6761
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。，先看看效果吧，拿实例说话，直接渲染四万多条数据不分页，树形表格可以展开。
uniapp请求数据渲染页面
05-17
在Uniapp中，可以使用Vue的数据绑定和组件化开发来实现数据请求和页面渲染。一般来说，可以使用uni.request()方法来发送请求，然后在请求成功后将数据保存到Vue的data中，最后在页面中使用数据绑定进行渲染。 以下是一个简单的例子： 1. 在Vue实例中定义data: ``` export default { data() { return { dataList: [] } }, methods: { getData() { uni.request({ url: 'https://example.com/api/data', success: res => { this.dataList = res.data } }) } }, mounted() { this.getData() } } ``` 2. 在页面中使用数据绑定进行渲染: ``` <template> <view> <view v-for="(item, index) in dataList" :key="index"> <text>{{ item.title }}</text> </view> </view> </template> ``` 在上面的例子中，我们使用了uni.request()方法发送了一个请求，请求成功后将响应数据保存到了Vue实例的dataList属性中。然后在页面中使用v-for指令将dataList中的数据进行循环渲染，最后使用数据绑定将每个数据项的title属性渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值