日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

小程序中元素滾動到元素的底部, 一直保持在底部

作者:yunchong_zhao 更新時間: 2022-04-17 編程語言

如果是在web端的話 這個還是比較簡單的,直接設(shè)置那個元素的 滾動他底部就可以了

但是小程序中 只有 頁面滾動 pageScroll

但是這個時候 我們就搞不了嗎
建議將長列表 改成 ScrollView滾動列表進(jìn)行操作,然后通過設(shè)置這個列表的scrollTop 進(jìn)行設(shè)置

我這里拿taro舉例子。其實原生小程序和uniapp 差不多和這個一樣

<ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={scrollTop}
       
>
  <View style={vStyleA}>A</View>
   <View style={vStyleB}>B</View>
   <View style={vStyleC}>C</View>
 </ScrollView>

有的童鞋可能疑問 我們又不知道 這個長列表的滾動高度是多少呢 怎么設(shè)置呢

其實只要你設(shè)置的足夠大。他就會滾動到底部
比如我這里 設(shè)置 9999

this.setState({
	scrollTop: 9999
})

但是不要一進(jìn)入頁面就設(shè)置這么大。需要搞一個定時器

setTimeout(() => {
this.setState({
	scrollTop: 9999
})
})

還有需要注意的就是 如果兩次設(shè)置的是同一個數(shù)值的話 她就會在原來的位置不動
這個時候我們只需要在原來基礎(chǔ)上進(jìn)行加1就可以了 她就會一直保持在底部了

this.setState({
	scrollTop: this.state.scrollTop + 1
})

這樣就可以實現(xiàn)了。

有問題的還可以私信我。我給你進(jìn)行解答

關(guān)注我 持續(xù)更新前端知識

原文鏈接:https://yunchong.blog.csdn.net/article/details/122543161

欄目分類
最近更新