干货 | Taro虚拟列表最佳实践

export default class VirtialList extends Component {    constructor(props) {        super(props)        this.state = {          twoList: [], // 二维数组        }    }    componentDidMount() {        // 接收外部传入的列表数据        const { list } = this.props        // 将list格式化为二维数组        this.formatList(list)    }    initList = [] // 承载初始化的二维数组，该数组初始化完成之后就不会再变了，除非外部list变化    /**     * 将列表格式化为二维     * @param  list   列表     */    formatList(list) {        // 用户可自定义二维数组每一个维度的数据量        const { segmentNum } = this.props                let arr = []        const _list = [] // 二维数组副本        list.forEach((item, index) => {          arr.push(item)          if ((index + 1) % segmentNum === 0) {            // 够一个维度的量就装进_list            _list.push(arr)            arr = []          }        })        // 将分段不足segmentNum的剩余数据装入_list        const restList = list.slice(_list.length * segmentNum)        if (restList?.length) {          _list.push(restList)        }        this.initList = _list        this.setState({          twoList: _list.slice(0, 1), // 第一次渲染，只取第一个维度的数据        })    }    render() {        const {          twoList,        } = this.state        // 渲染回调        const { onRender } = this.props        return (            <ScrollView>                <View className="zt-main-list">                  {                    twoList?.map((item, pageIndex) => {                      return (                        // 每一个屏幕都用一个节点包裹着                        <View key={pageIndex} className={`wrap_${pageIndex}`}>                            {                              item.map((el, index) => {                                return onRender?.(el, (pageIndex * segmentNum + index), pageIndex)                              })                            }                        </View>                      )                    })                  }                </View>            </ScrollView>        )    }}

state = {    wholePageIndex: 0, // 每一屏为一个单位，屏幕索引}formatList(list) {    // ...    this.setState({        twoList: _list.slice(0, 1),    }, () => {        // 注意：放在下一个事件循环去获取节点，更有保障        Taro.nextTick(() => {            this.setHeight()        })    })}pageHeightArr = [] // 用来装每一屏的高度setHeight():void {    const { wholePageIndex } = this.state    const query = Taro.createSelectorQuery()    query.select(`.wrap_${wholePageIndex}`).boundingClientRect()    query.exec((res) => {      this.pageHeightArr.push(res?.[0]?.height)    })}

<ScrollView    scrollY    onScrollToLower={this.renderNext}    lowerThreshold={250}>//...</ScrollView>
renderNext = () => {    // 每次加载下一屏幕的数据，修改屏幕索引    const page_index = this.state.wholePageIndex + 1
    this.setState({      wholePageIndex: page_index,    }, () => {      const { wholePageIndex, twoList } = this.state      // 找到当前屏幕的对应的数据，塞入二维数组      twoList[wholePageIndex] = this.initList[wholePageIndex]      this.setState({        twoList: [...twoList],      }, () => {        Taro.nextTick(() => {          this.setHeight()        })      })    })}

setHeight() {    //...    this.observe()}observe = () => {    const { wholePageIndex } = this.state    // 外界用户传入的组件高度    const { scrollViewProps } = this.props    // 以传入的scrollView的高度为相交区域的参考边界，若没传，则默认使用屏幕高度    const scrollHeight = scrollViewProps?.style?.height || this.windowHeight    // 设定监听的范围，我们这里默认监听上下两个屏幕的高度    const observer = Taro.createIntersectionObserver(this.currentPage.page).relativeToViewport({      top: 2 * scrollHeight,      bottom: 2 * scrollHeight,    })    observer.observe(`.wrap_${wholePageIndex}`, (res) => {      const { twoList } = this.state      if (res?.intersectionRatio <= 0) {        // 当没有与当前视口有相交区域，则将该屏的数据置为该屏的高度占位        twoList[wholePageIndex] = { height: this.pageHeightArr[wholePageIndex] }        this.setState({          twoList: [...twoList],        })      } else if (!twoList[wholePageIndex]?.length) {        // 如果有相交区域，则将对应的维度的数据塞入二维数组        twoList[wholePageIndex] = this.initList[wholePageIndex]        this.setState({          twoList: [...twoList],        })      }    })}render() {    return (        <ScrollView>            <View className="zt-main-list">              {                  twoList?.map((item, pageIndex) => {                      return (                        <View key={pageIndex} className={`wrap_${pageIndex}`}>                          {                            item?.length > 0 ? (                              <Block>                                {                                  item.map((el, index) => {                                    return onRender?.(el, (pageIndex * segmentNum + index), pageIndex)                                  })                                }                              </Block>                            ) : (                              <View style={{'height': `${item?.height}px`}}></View>                            )                          }                        </View>                      )                   })                }            </View>        </ScrollView>    )}