如何在Taro 中动态获取项目高度,并使用在VirtualList 虚拟列表?
在useReady hook 尝试获取界面上的节点信息boundingClientRect,获取高度后设定于useState,VirtualList itemSize属性,无法正确显示 itemSize 只会初始化一次,无法改变高度吗? 代码: const ListPage =()=>{
const [itemHeight, setItemHeight] = useState(0)
const list = [
{
id: 1,
name: '1',
value: '1',
phone: '1',
},
{
id: 2,
name: '2',
value: '2',
phone: '2',
},
]
useReady(() => {
const query = Taro.createSelectorQuery()
query
.select(`#item-${0}`)
.boundingClientRect(res => {
setItemHeight(res.height)
})
.exec()
})
const renderItem = ({ id, index, data }) => {
return
}
return (
<VirtualList
height={800} /* 列表的高度 */
height={windowHeight} /* 列表的高度 */
width='100%' /* 列表的宽度 */
item={renderItem} /* 列表单项组件,这里只能传入一个组件 */
itemData={list} /* 渲染列表的数据 */
itemCount={list.length} /* 渲染列表的长度 */
itemSize={itemHeight} /* 列表单项的高度 */
enhanced /*解決列表抖動問題*/
/>
)
}