React Taro每次点击实现自动下滑滚动_react 点击向下移动

import React, { useState, useEffect, useRef } from 'react'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { questionList, questionOptions } from './data'
import QuestionCard from './questionCard'
import ToolbarButton from '@/component/ToolbarButton'
import { FixedView, Toast } from '@taroify/core'
import Taro from '@tarojs/taro'
 
export default function QuestionNaire() {
  const messagesEndRef = useRef(null)
  let [qusetionIndex, setQuestionIndex] = useState('1')
  const [newQueList, setNewQueList] = useState([])
  let [height, setHeight] = useState('300')
  const getTobToTop = () => {
    Taro.createSelectorQuery()
      .select('#date_list')
      .boundingClientRect((rec) => {
        console.log('rec33', rec)
        setHeight(rec?.height || 0)
        if (!rec?.top) {
          setTimeout(() => {
            getTobToTop()
          }, 200)
        }
      })
      .exec()
  }
  useEffect(() => {
    getTobToTop()
    if (questionList[0].questions.length > newQueList.length) {
      setNewQueList(questionList[0].questions.slice(0, qusetionIndex))
    } else {
      Toast.open('这是最后一题啦')
    }
  }, [qusetionIndex])
  useEffect(() => {
    console.log(height, 'height')
    Taro.pageScrollTo({
      scrollTop: height,
      duration: 300,
    })
  }, [height])
  return (
    <>
      <View className="p-sm m-5 bg-white text-sm" id="date_list">
        {newQueList.map((item, index) => {
          console.log(item.jumpTo, 'item')
          return (
            <View key={index}>
              <QuestionCard {...item} i={++index} />
              <View ref={messagesEndRef}></View>
            </View>
          )
        })}
      </View>
      <View className="h-35"></View>
      <FixedView position="bottom">
        <View className="bg-white p-sm">
          <ToolbarButton
            leftButton={{
              text: '上一题',
              color: 'default',
              onClick: () => setQuestionIndex(--qusetionIndex),
            }}
            rightButton={{
              text: ' 下一题',
              onClick: () => {
                setQuestionIndex(++qusetionIndex)
                // if (item.jumpTo == '-2') {
                //   setQuestionIndex(questionList[0].questions.length)
                // } else if (item.jumpTo == '-2') {
                //   setQuestionIndex(++qusetionIndex)
                // } else {
                //   setQuestionIndex('1')
                // }
              },
            }}
          ></ToolbarButton>
        </View>
      </FixedView>
      <Toast id="toast" />
    </>
  )
}

1、监听元素高度，给要监听的元素设置id,注意在Dom渲染完成前获取为null的问题

 Taro.createSelectorQuery()

      .select('#date_list')

      .boundingClientRect((rec) => {

        console.log('rec33', rec)

        setHeight(rec?.height || 0)

        if (!rec?.top) {

          setTimeout(() => {

            getTobToTop()

          }, 200)

        }

      })

      .exec()

2、使用Taro实现向下滚动

Taro.pageScrollTo({

      scrollTop: height,

      duration: 300,

    })