使用Taro開(kāi)發(fā)小程序時(shí)候發(fā)現(xiàn) ScrollView 會(huì)在同級(jí)節(jié)點(diǎn)發(fā)生增刪情況下會(huì)自動(dòng)會(huì)滾ScrollView到頂部，經(jīng)過(guò)多次驗(yàn)證和查閱Taro原理發(fā)現(xiàn)這是Taro自身bug

出現(xiàn)回滾頂部bug的演示代碼

下面有一個(gè)列表和按鈕，點(diǎn)擊按鈕會(huì)出現(xiàn)加載更多的字樣。但是當(dāng)我們點(diǎn)擊按鈕時(shí)候，ScrollView就會(huì)驚奇發(fā)生會(huì)滾到頂部的現(xiàn)象。

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>) }

出現(xiàn)BUG原因

因?yàn)門(mén)aro其實(shí)是將React所有組件的state更新歸級(jí)Page統(tǒng)一進(jìn)行管理即樓級(jí)組件對(duì)應(yīng)的state是

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

那么新增和刪除節(jié)點(diǎn)就是

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

這樣微信進(jìn)行diff時(shí)候認(rèn)為是一個(gè)全新的數(shù)組，這樣整個(gè)樓級(jí)組件都會(huì)重新創(chuàng)建。所以ScrollView會(huì)被重新創(chuàng)建，就會(huì)出現(xiàn)ScrollView自動(dòng)會(huì)滾頂部的情況。

解決方案

• 避免同級(jí)節(jié)點(diǎn)操作，這個(gè)幾乎很難。所以拋棄
• 使用 Block 組件包裹ScrollView的同級(jí)節(jié)點(diǎn)，那么我們更新節(jié)點(diǎn)時(shí)候就是單獨(dú)對(duì)數(shù)組某個(gè)元素更新。這樣就不會(huì)影響到ScrollView元素。

當(dāng)我們用Block包裹 加載更多 發(fā)生更新的行為將是這樣，那么在微信小程序diff對(duì)比時(shí)候只是樓層數(shù)組里面某個(gè)元素內(nèi)容發(fā)生變化，就不會(huì)對(duì)ScrollView節(jié)點(diǎn)進(jìn)行重建

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>) }

總結(jié)

以上是生活随笔為你收集整理的关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。