tingyuxuan2302 / taro3-virtual-list

基于taro3封装的虚拟列表,对列表节点不等高以及白屏等问题支持友好,无计算量,性能优异,支持各大小程序以及h5页面
MIT License
190 stars 26 forks source link

为什么按示例,使用不成功呢 #6

Closed eugle closed 3 years ago

eugle commented 3 years ago

image

按照示例代码直接拷贝过去,显示如上图所示,是我哪里不对吗,下面是我的代码

import React, {useState, useEffect} from 'react'
import {View} from "@tarojs/components"
import {TaroVirtualList} from 'taro-virtual-list'

export default function Cart() {
  // 模拟list数据
  const [list, setList] = useState([])

  // 设置list
  useEffect(() => {
    const arr = []
    Array(84).fill(0).forEach((item, index) => {
      arr.push(index)
    })
    setList(arr)
  }, [])
  // 渲染列表Item
  const renderFunc = (item, index, pageIndex) => {
    return (
      <View className="el">{`当前是第${item}个元素,是第${pageIndex}屏的数据`}</View>
    )
  }
  const handleBottom = () => {
    console.log('触底了')
  }
  const handleComplete = () => {
    console.log('加载完成')
  }
  console.log(list);
  return (
    <View>
      <TaroVirtualList
        list={list}
        onRender={renderFunc}
        onBottom={handleBottom}
        onComplete={handleComplete}
        scrollViewProps={{
          style: {
            "height": '100vh',
          },
        }}
      />
    </View>
  )

}
tingyuxuan2302 commented 3 years ago

image

按照示例代码直接拷贝过去,显示如上图所示,是我哪里不对吗,下面是我的代码

import React, {useState, useEffect} from 'react'
import {View} from "@tarojs/components"
import {TaroVirtualList} from 'taro-virtual-list'

export default function Cart() {
  // 模拟list数据
  const [list, setList] = useState([])

  // 设置list
  useEffect(() => {
    const arr = []
    Array(84).fill(0).forEach((item, index) => {
      arr.push(index)
    })
    setList(arr)
  }, [])
  // 渲染列表Item
  const renderFunc = (item, index, pageIndex) => {
    return (
      <View className="el">{`当前是第${item}个元素,是第${pageIndex}屏的数据`}</View>
    )
  }
  const handleBottom = () => {
    console.log('触底了')
  }
  const handleComplete = () => {
    console.log('加载完成')
  }
  console.log(list);
  return (
    <View>
      <TaroVirtualList
        list={list}
        onRender={renderFunc}
        onBottom={handleBottom}
        onComplete={handleComplete}
        scrollViewProps={{
          style: {
            "height": '100vh',
          },
        }}
      />
    </View>
  )

}

因为你没有拷贝css,你这列表一整个屏幕都撑不满,肯定触发不了上拉到底的方法