使用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结构发生变化会自动回滚到顶部解决方案和原因的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。