关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因

使用Taro开发小程序时候发现 ScrollView 会在同级节点发生增删情况下会自动会滚ScrollView到顶部，经过多次验证和查阅Taro原理发现这是Taro自身bug

出现回滚顶部bug的演示代码

下面有一个列表和按钮，点击按钮会出现加载更多的字样。但是当我们点击按钮时候，ScrollView就会惊奇发生会滚到顶部的现象。

const App: React.FC = () => {const [show, setShow] = useState<boolean>(false)const list = new Array(1000)const onClick = (): void => setShow(true)return (<View><View onClick={onClick} >按钮</View><ScrollView>{list.map(_, index) => (<View key={index}>{index}</View>)}</ScrollView>{show && <View>加载更多</View>}</View>)
}

出现BUG原因

因为Taro其实是将React所有组件的state更新归级Page统一进行管理即楼级组件对应的state是

// 初始化state
state = {Page: [ View, ScrollView ]
}

那么新增和删除节点就是

const oldPage = this.state.Page
this.setState({ Page: [ ...oldPage, View ]
})

这样微信进行diff时候认为是一个全新的数组，这样整个楼级组件都会重新创建。所以ScrollView会被重新创建，就会出现ScrollView自动会滚顶部的情况。

解决方案

避免同级节点操作，这个几乎很难。所以抛弃
使用 Block 组件包裹ScrollView的同级节点，那么我们更新节点时候就是单独对数组某个元素更新。这样就不会影响到ScrollView元素。

当我们用Block包裹 加载更多 发生更新的行为将是这样，那么在微信小程序diff对比时候只是楼层数组里面某个元素内容发生变化，就不会对ScrollView节点进行重建

const oldPage = this.state.Page
oldPage[2] = [ View ]
this.setState({ Page: oldPage })

解决bug代码

const App: React.FC = () => {const [show, setShow] = useState<boolean>(false)const list = new Array(1000)const onClick = (): void => setShow(true)return (<View><View onClick={onClick} >按钮</View><ScrollView>{list.map(_, index) => (<View key={index}>{index}</View>)}</ScrollView><Block>{show && <View>加载更多</View>}</Block></View>)
}

关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因相关推荐

javascript遍历DOM结构和对象结构
在实际工作中,记住浏览器中对象的属性.方法几乎是件不可能完成的任务,保持一份资料或网址是个好办法.但是查阅资料也是要花费不少时间,如果能有个脚本将对象的结构打印出来,将会加速开发进程. 下面是我编写的 ...
jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例 ...
jsplumb dom 位置发生变化，连线错位
4.jsplumb 在 dom 位置发生变化 jsplumb 监听不到,所以连线位置不对. 场景:点击按钮查找parent 的关系,展示parent,相反查找 children, 但是按钮盒子的位置变 ...
javascript --- 将DOM结构转换成虚拟DOM 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中 <img /> => { tag: 'img'} 文本节点 => { tag: u ...
DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构
讲评节点属性 nodeType 元素节点 1 大写属性节点 2 文本节点 3 #text 注释节点 8 #comment document 9 DocumentFragment 11 nodeNa ...
datagrid 完整dom结构
<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...
提高测试脚本复用性降低DOM结构引起路径变化的影响
问题描述在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...
简单认识JavaScript 与 DOM结构的文本、标签和属性节点
一 JavaScript JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.JavaScript 是因特网上最流行的脚 ...
SpringMVC--Ajax异步加载数据$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码
1. SpringMVC–Ajax异步加载数据 1.1 实体类user User.java package com.tian.pojo;import lombok.AllArgsConstructor ...