收藏
回答

如何在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 /*解決列表抖動問題*/
       />

 
  )

}


最后一次编辑于  2024-10-11
回答关注问题邀请回答
收藏
登录 后发表内容