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