taro开发小程序下拉自动加载出现的一些问题会自动回顶部

Taro开发小程序时遇到了下拉刷新这样的功能,可以使用可滚动视图区域(ScrollView)来完成这样的功能,但是合并获得到的数据数组后,会让列表直接返回到头部,除非手动跳回来,否则只要获得数据就会回到最上方。

尝试将数据改为了二维数组,使用push进行数据的推入,如下代码所示。

  const {tabLunchList} = this.state
    OU.getHttp("url+page=" + this.state.lunchPage).then((res) => {
      let data = res.data
      tabLunchList.push(data)
      this.setState({
        tabLunchList,
      })
      Taro.hideLoading()
    })

但是依旧发现存在跳回到顶部的问题,最终发现原因是因为ScrollView套在了Tab组件中,在Taro中只要将ScrollView组件拆出就可能出现这个问题,最终将此组件写在了页面中,通过切换ScrollView组件中的数据完成的此功能。

指定此视图在到达页面底部时需要执行的方法,如下代码所示。

        <ScrollView className='scrollList' refresherTriggered={false} scrollY refresherThreshold={200}
                    scrollTop={scrollTopNum}
                    onScrollToLower={this.handleGetBottom.bind(this)}>
          <MainTab></MainTab>
        </ScrollView>

这样就可以实现下拉数据更新,并且不会跳转回顶部,还有一个小问题,就是需要切换其他的数据时需要返回到顶部,可以改变scrollTopNum的值,但是会存在一个小问题,就是当前的scrollTopNum值不会跟随着用户的操作而改变,所以直接对scrollTopNum赋值一个固定的内容,因为值没有发生变化,观察者不会主动的发起结点的更新,也就是说,在第二次切换Tab时不会自动因为scrollTopNum=0而回到顶部。

可以间接的通过随机数解决这个问题,如下代码所示。

  handleClick(value) {
    this.setState({
      current: value,
      scrollTopNum: Math.random()
    })
  }

链接