让vue重新渲染

时间：2024-07-04 17:43:49浏览次数：27

标签：vue 滚动渲染每次重新 scrollTop

问题重现
解决方法
项目地址

问题重现

<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop"> 这段代码中，我想实现切换页面但是滚动条每次都会切换到顶部，在js代码中设置scrollTop值为0，但是发现不起作用
问GPT发现是，如果scrollTop的值没有变的话，Vue是不会重新渲染

解决方法

当设置scrollTop为0时，滚动视图会滚动到顶部。但是，如果你多次设置scrollTop为0，而其当前值已经是0，Vue可能不会触发重新渲染，因为它认为值没有改变。通过在0和1之间切换scrollTop的值，你可以确保每次切换时都会触发重新渲染，使得滚动视图重新计算滚动位置，从而实现每次都回到顶部的效果。
让scrollTop中的值每次都变就好了，每次都很小就行

项目地址

https://github.com/PooYooGitHub/learnproject-uni-app/blob/main/pages/cate/cate.vue

Screenshot1

Screenshot2

标签：vue,滚动,渲染,每次,重新,scrollTop
From： https://www.cnblogs.com/pooyoo/p/18284304

Vue学习入门
介绍新手程序员一枚，渴望成为大神，来点关注来点赞，给我介绍几个大神也行，球球了。主要记录自己的学习过程，将之前的笔记进行整理并分享一下，有错误请指出，谢谢各位大佬爷们的观看。下面开始分享我的笔记VSCode插件AutoClose......
基于Java+Vue的采购管理系统：采购过程合规高效（整套代码）
前言：采购管理系统是一个综合性的管理平台，旨在提高采购过程的效率、透明度，并优化供应商管理。以下是对各个模块的详细解释：一、供应商准入供应商注册：供应商通过在线平台进行注册，填写基本信息和资质文件。资质审核：系统对供应商提交的资质文件进行自动或人工审核，确......
基于深度学习的动画渲染
基于深度学习的动画渲染是一项利用深度学习技术来提高动画制作效率和质量的前沿研究领域。该技术旨在通过深度学习模型加速动画渲染过程，优化图像质量，并实现复杂效果的自动化生成。以下是关于这一领域的系统介绍：1.任务和目标动画渲染的主要任务是将3D模型、场景和动画转换为......
vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
一、是什么权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说，所有的请求发起都触发自前端路由或视图所以我们可以从这两方面入......
vue3父组件调用子组件方法
父组件：通过ref获取子组件实例<template><divstyle="text-align:center"><button@click="callChildMethod">点击获取子组件数据</button><div>获取到子组件的数据如下:<div>{{childData}}</div></div&......
273：vue+openlayers 显示流动轨迹并计算航向
作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第273个示例文章目录一......
Vue3 子【emit 】传父【监听】
<template><h1>IamParentComponent</h1><ChildComponent@child-click="zCf"/><h2>{{x}}</h2></template><scriptsetup>importChildComponentfrom'./ChildCom......
前端-vue工程化-Pinia的使用
先来看一下我们的文件夹吧：大多数vue3前端项目中都会有这样一个文件夹是用来存放全局变量的地方，用来做状态管理。我们项目中使用的状态管理工具其实就是Pinia，当然不是我推荐大家用的，这个有迹可循，因为Pinia是在Vue官网上被推荐的一种方式。下面截几张官网上的图片：然后给......
vue3 父组件【属性】传值给子组件【props】接收
父组件文件：parentcomponent.vue子组件文件：childcomponent.vue传普通值传动态值传对象传数组<template> <h1>IamParentComponent</h1> <ChildComponentmsg="nice"/> </template><scriptsetup> importC......
Vue.js 起步
每个Vue应用都需要通过实例化Vue来实现。语法格式如下：varvm=newVue({//选项})接下来让我们通过实例来看下Vue构造器中需要哪些内容：实例<divid="vue_det"><h1>site:{{site}}</h1><h1>url:{{url}}</h1><h1>{{details()}}</h1>&l......

让vue重新渲染

问题重现

解决方法

项目地址

相关文章

赞助商

阅读排行