关于uni-app的scroll-view里的内容不更新问题

原创已于 2023-06-20 10:49:32 修改 · 689 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2023-06-15 17:49:41 首次发布

当scroll-view内的第一行直接使用v-for进行循环渲染时，可能出现列表数据更新但页面不更新的状况。为解决此问题，可以将v-for嵌套在scroll-view外的view标签内，即在scroll-view中先有一个view容器，然后在这个容器中使用v-for，这样可以确保列表数据变化时页面正确刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不更新的情况：scroll-view标签下的第一行直接是用v-for循环渲染。初次渲染是没有问题的，列表数据更新时页面不更新。

<scroll-view>
	<view v-for="item in list">{{item}}<view/>
<scroll-view/>

解决方法：scroll-view标签下的第一行不要直接用v-for，先套一个view，再在套的view里用v-for即可解决。

<scroll-view>
	<view>
		<view v-for="item in list">{{item}}<view/>
	</view>
<scroll-view/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boyspan

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp——scroll-view手机预览不显示数据

World_Mei的博客

07-28

1862

今天在做项目的时候发现scroll-view组件内的数据在页面上渲染在微信开发者工具中可以正常显示，但是手机预览数据不显示，代码如下： <scroll-view scroll-y class="sqList"> <block v-for="(item,index) in sqlistData" :key="index"> <view class="sq" @tap="selectSQ">{{item.name}}</view> </block&g

uni-app scroll-view可视范围判断

pgLi

06-18

627

scroll-view可视范围判断

2 条评论您还未登录，请先登录后发表或查看评论

uni-app [scroll-view]组件数据不能同步更新的问题

qq_38810813的博客

06-24

873

数据不更新强制刷新

Scroll View出包后内容不显示

Dragon Peng 的博客

09-03

1611

Scroll View出包后内容不显示ScrollView出包内容与unity编辑器下显示的内容不符ScrollView显示异常的解决方法 ScrollView出包内容与unity编辑器下显示的内容不符在一次出包的时候在编辑器下运行时没有任何问题的，然后出完包滑动框(Scroll view)中的内容莫名奇妙的消失了看不到，但是滑动框的滑动条的显示是正常的，然后通过打印显示出来的位置、角度、大小等...

uniapp用scroll-view进行刷新和下拉加载没反应问题

FUFCY的博客

04-01

1926

问题出现在没给scroll-view设置高度，给他个类名设置 height:100vh

uniapp 返回列表不刷新处理（列表返回优化）

词不达意难知的博客

06-11

3532

前言： uniapp 是我第一次写看了半天基本教程直接开冲所以项目中就会遇到很多坑（文章末尾会说下遇到的问题）首先说理想效果和场景 1.列表点击去详情页因为列表是用子组件渲染的所以用getCurrentPages（）来拿到当前页也就是父页面的方法或变量不是用组件渲染的话直接使用this.你的加载列表方法（有个小点—因为是用navigateTo 列表页数据会被缓存下来类似vue的keepAlive，可以看到我的方法叫resetThePage（），在执行前重置列表页面数据例如：分页变

uni-app——uniapp 中 scroll-view 上下滑动卡顿

qq_43201350的博客

04-05

1700

uni-app——uniapp 中 scroll-view 上下滑动卡顿

uni-app:从运行原理上面解决性能优化问题

01-27

本文将探讨uni-app的运行原理，以及如何从这些原理出发解决性能优化问题。首先，uni-app的运行机制涉及到逻辑层和视图层的分离。逻辑层负责业务逻辑和数据管理，而视图层则处理页面的渲染。在非H5端，逻辑层与视...

uni-app列表项实现左划操作功能

02-25

在uni-app框架中，我们可以利用其强大的组件化特性来实现丰富的交互效果，比如在列表项上实现左滑操作功能。这种功能常见于很多应用中，如邮件客户端、社交应用等，用户通过左滑可以触发一些快捷操作，如删除、标记...

uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能

最新发布

qq_39691676的博客

04-28

915

计算方式:swiper高度 = page高度 - tabs高度 - search高度。

uni-app - 改变数据后视图无更新变化解决方案，更改数据不刷新 uni-app坑

weixin_45901902的博客

01-19

7105

当页面数据全部请求完毕，但用户操作导致数据改变时，视图并未按照最新数据进行更新。有时候，我们动态改变数据的时候发现视图并未改变，（或者h5改变小程序并为改变）常见于在 methods函数或其他位置中，改变data数据的时候，虽然数据变了，但视图没有更新，本文提供两个解决方案，我上uni-app付费花了9.9元购买，（如下截图）在这里插入图片描述真的付钱了好气好气100%解决该问题，非常好用，比如下面的代码，给data赋值后并没有在页面上有反应(实际console打印数据已经变了)∶。

【uniapp】小程序开发8：滚动组件scroll-view

不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员

12-11

7418

我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。这个时候，就可以使用uniapp提供的滚动组件scroll-view。

uniapp中scroll-view横向滚动错乱,左右滑动样式错乱

weixin_48095278的博客

05-28

665

uniapp中scroll-view横向滚动错乱,左右滑动样式错乱

vue3数据更新页面不更新

m0_70542915的博客

03-14

4488

笔记

uni-app的＜scroll-view＞＜/scroll-view＞向上滚动判断是否应该刷新

libinpeng123的博客

02-07

1758

uni-app的标签向上滚动根据内容是否滚动到顶部判断是否应该刷新

uni-app或vue页面、组件视图数据无法刷新问题的解决办法

baidu_41899377的博客

12-28

6242

方法1：为模块或组件创建 key 目前 uni-app 还无法使用类似 Vue 中的 watch 方法来监听数据变化以更新视图，也无法监听 data 中数组或对象的变化。所以碰到需要动态更新数据，刷新页面或组件视图时，需要使用 key 属性来刷新，代码示例如下： <template> <view> <view class="module-box1" :key="moduleKey"></view> <commponent1 v-if="

微信小程序_.push()、_.unshift()、_.set()后数据库没有更新

qq_41554955的博客

02-02

1605

1.问题：微信小程序_.push(),.unshift(),.set()没有更新云数据库 2.原因：因为是手动建立’记录’，而使其应使用函数的时候失效 ps:‘记录’: 3.解决方法：用小程序的代码建立’记录’，之后，可手动（手动指的是：使用云数据库图形化界面设计数据库）建立各个属性,各个属性可根据_.push(),.unshift(),.set()函数操作数据库。 4.附送代码：（1）.创建一条‘记录’： onAdd: function () { const db = wx.cloud.databa

uniapp解决明明更新了数据，界面却没有刷新的问题

CHENC0518的博客

03-09

9293

一般都是this指向的问题。切记要用这种形式:()=>(箭头函数)，对数据进行赋值否则就会使得this指向出问题。从而数据出错。今天无敌开心，这几天因为后端数据库和前端预览图片展示的问题一直困扰着我，想了很多办法都没用，本来都想放弃了，今天没想到解决了超级开心。奖励自己等下点个宵夜。嘿嘿。 ...

uniapp使用v-for页面不刷新解决办法

herojeo的博客

11-11

1820

DOM中的列表却没有更新。

uni-app scroll-view 实现循环滚动

02-11

### 实现 uni-app 中 scroll-view 组件的无缝循环滚动为了实现在 `uni-app` 的 `scroll-view` 组件中的无缝循环滚动效果，可以采用设置定时器来自动触发滚动位置的变化，并通过监听滚动事件调整显示的内容。需要注意的是，在实现过程中应避免使用带有 `fixed` 属性的元素以防止视图随页面滚动而移动[^1]。下面是一个简单的例子展示如何创建一个水平方向上的无限轮播： ```html <template> <view class="container">  <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="handleScroll" :scroll-left="scrollLeft" ref="scrollViewRef" > <block v-for="(item, index) in items.concat(items)" :key="index"> <view class="scroll-item">{{ item }}</view> </block> </scroll-view> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], // 原始数据项 currentIndex: 0, timer: null, scrollLeft: 0 }; }, mounted() { this.startAutoScroll(); }, methods: { handleScroll(e) { const { detail } = e; let width = Math.round(detail.scrollWidth / (this.items.length * 2)); if ((detail.scrollLeft >= width && !this.isAnimating)) { this.currentIndex++; this.scrollToNext(); } }, scrollToNext() { this.$nextTick(() => { this.scrollLeft += this.$refs.scrollViewRef.offsetWidth; // 更新滚动距离 setTimeout(() => { this.resetPosition(); // 调整回初始状态 }, 50); }); }, resetPosition() { this.scrollLeft -= this.$refs.scrollViewRef.offsetWidth; this.currentIndex %= this.items.length; if (this.timer !== null) clearTimeout(this.timer); this.startAutoScroll(); }, startAutoScroll() { this.timer = setInterval(() => { this.scrollToNext(); }, 3000); // 自动切换时间间隔 } }, beforeDestroy() { clearInterval(this.timer); } }; </script> <style scoped> .container { position: relative; } .scroll-view_H { white-space: nowrap; overflow: hidden; height: 80px; } .scroll-item { display: inline-block; min-width: 100%; text-align: center; line-height: 80px; font-size: 36rpx; } </style> ``` 此代码片段展示了如何利用 Vue.js 和 CSS 来构建一个基本的水平无限轮播功能。这里的关键在于将原始列表重复一次并连接起来形成一个新的数组用于渲染，这样当到达最后一个项目时就可以平滑过渡到第一个项目上从而达到视觉上的连续性。同时设置了定时器每隔一段时间调用方法使容器向右滚动一定宽度的距离模拟自动播放的效果；并且在每次完成一轮完整的动画之后重置当前位置以便继续下一个周期的播放。