taro ScrollView 实现页面内容增加自动上滑到最顶部

weixin_43886340

已于 2022-06-16 14:11:23 修改

阅读量1.7k

点赞数

文章标签： html 前端 reactjs

于 2022-06-16 14:06:31 首次发布

本文链接：https://blog.csdn.net/weixin_43886340/article/details/125314749

版权

在taro移动端开发的时候，在底部动态增加内容的时候需要页面自动滚动上去。这时候用到了taro自带的视图组件ScrollView结合Taro.createSelectorQuery()计算容器高度

1.组件引入

import {  ScrollView } from '@tarojs/components'

2.在页面内使用。scrollTop用动态获取的高度来赋值

  <ScrollView 
              className='scrollview'
              scrollY
              scrollWithAnimation
              scrollTop={height}   
            >  


</ScrollView >

3.当页面元素增加时，动态计算height并且赋值

  //页面滚动方法
  scrollFun() {
    Taro.createSelectorQuery().in(this.$scope).select('#scollView').boundingClientRect( rec => {  
          this.setState({height:rec.height})
    }).exec() 
  }