Taro實現VirtualList虛擬列表

        在使用Taro開發微信小程序時，需要加載長列表數據，在官網找了相關的VirtualList虛擬列表的組件，要么版本過低（項目中使用3.0.1版本），要么使用不方便（可能是自己沒看懂的問題），官方也說有虛擬列表就是長列表加載，使用后發現性能不能達到滿足，於是就參考網上的虛擬列表的思路開始自己做。

      簡單說下思路，設計思路是通過虛擬列表，只展示屏幕可視區域范圍的數據，但在taro中效果還是有點卡頓，經大佬指點，渲染可視區域時，
渲染組件不再進行刪除和新建，而是創建指定數量的組件展示，向下滾動時，將最上面的組件通過css修改樣式顯示的位置，
形成一種鏈條滾動的形式。

     簡化的思路圖：

      

下面貼出主要的代碼：

/**
 * author: wang.p  2021-09-18
 *
 * description:  自定義虛擬列表
 *
 * */

import React, {Component} from "react"
import {ScrollView, View} from '@tarojs/components'
import PropsType from 'prop-types';
import classnames from 'classnames';
import './virtual-list.scss';

class VirtualList extends Component {

  static propTypes = {
    className: PropsType.string, // 樣式名
    rowCount: PropsType.number,  // 渲染的行數
    source: PropsType.array,  // 數據源數組
    rowHeight: PropsType.number,  // 行高
    scrollToIndex: PropsType.number, // 跳轉到指定的位置
    getRowHeight: PropsType.func,  // 動態行高
    onScroll: PropsType.func, // 滾動處罰事件
    onRowRender: PropsType.func, // 行渲染
    onSrollTopRecommend: PropsType.func, // 觸發頂部樣式事件   這個是本人項目中使用的，可以不用
  }

  static defaultProps = {
    rowCount: 20,
    source: [],
    rowHeight: 40
  }

  state = {
    rowCount: 20, // 顯示行數
    scrollHeight: 0, // 所有內容渲染的高度
    scrollData: [],  // 渲染可視區域數據的數組
    scrollStyles: [], // 樣式數組
    isCategoryToScroll: false, // 是否是分類切換定位滾動
    scrollToIndex: 0, // 跳轉到指定位置
    compareHeight: 0  // 觸發渲染的高度差
  }

  componentWillMount = () => {
    const {rowCount, source, rowHeight, getRowHeight} = this.props;
    let scrollStyles = [];
    let scrollData = [];
    let scrollHeight = 0;
    let compareHeight = 0;
    source.forEach((item, idx) => {
      let styles = {position: 'absolute', left: 0, top: scrollHeight};
      scrollStyles.push(styles);
      let tempHeight = typeof getRowHeight === 'function' ? getRowHeight(idx, item) : rowHeight;
      scrollHeight += tempHeight;
    });

    let showCount = source.length < rowCount ? source.length : rowCount;
    for (let i = 0; i < showCount; i++) {
      scrollData.push({sort: i, row: i})
    }

    compareHeight = Math.floor(scrollStyles[showCount - 1].top / showCount) * 3;

    this.setState({scrollHeight, scrollData, scrollStyles, rowCount, compareHeight});
  }


  componentDidMount = () => {

  }

  componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any) {

    if (nextProps.scrollToIndex != this.state.scrollToIndex && this.state.scrollStyles.length > 0) {
      let scrollToIndex = nextProps.scrollToIndex > this.state.scrollStyles.length ? this.state.scrollStyles.length - 1 : nextProps.scrollToIndex;
      let scrollTop = this.state.scrollStyles[scrollToIndex];
      if (scrollTop) {
        this.setState({scrollToIndex: nextProps.scrollToIndex, scrollTop: scrollTop.top , isCategoryToScroll: true});
      }
    }
  }

  render() {
    const {className, style } = this.props;
    const {scrollHeight, scrollData, scrollStyles, scrollTop} = this.state;

    return <ScrollView className={classnames('self-virtual-list', className)}
                       style={{...style}}
                       scrollTop={scrollTop}
                       scrollY={true}
                       scrollWithAnimation
                       onScroll={this.onScroll.bind(this)}>
      <View className={'self-virtual-list-body'} style={{height: scrollHeight}}>
        {scrollData.length > 0 && scrollData.map((item, idx) => {
          return this.props.onRowRender(item, scrollStyles[item.row]);
        })}
      </View>
    </ScrollView>


  }

  currentScrollTop = 0;
  prevScrollTop = 0;  // 記錄上次滾動的Scrolltop

  findMinOrMax = (data, isMax= false) => {
    if (isMax) {
      return data.reduce((prev, next) => {
        if (prev.row < next.row) {
          return next;
        } else {
          return prev;
        }
      })
    } else {
      return data.reduce((prev, next) => {
        if (prev.row < next.row) {
          return prev;
        } else {
          return next;
        }
      })
    }
  }

  /**
   * 滾動事件，計算渲染菜品的數據
   * 滾動到頂部時，如果頂部有推薦菜品就展示出來，如果上拉滾動，就隱藏推薦菜品
   * */
  onScroll = (event) => {
    let scrollY = event.detail.deltaY;
    const eventScrollTop = event ? event.detail.scrollTop : this.state.scrollTop;
    const {scrollStyles, rowCount, compareHeight, scrollData, isCategoryToScroll} = this.state;

    if (Math.abs(this.currentScrollTop - eventScrollTop) > compareHeight || eventScrollTop <= scrollStyles[3].top || eventScrollTop >= scrollStyles[scrollStyles.length - 5].top) {
      // 查詢出當前scrollTop在那個范圍
      this.currentScrollTop = eventScrollTop;
      let scrollIndex = 0;
      for(let i=1;i<scrollStyles.length;i++) {
        if (scrollStyles[i - 1].top <= eventScrollTop && scrollStyles[i].top > eventScrollTop) {
          scrollIndex = i;
          break;
        }
      }
      // 計算出渲染范圍的最小下標和最大下標
      let minIndex = scrollIndex - parseInt(Math.floor(rowCount / 2.0));
      if (minIndex < 0) {
        minIndex = 0;
      }
      let maxIndex = minIndex + rowCount;
      if (maxIndex > scrollStyles.length - 1) {
        maxIndex = scrollStyles.length - 1;
      }
      // 找出當前顯示的數據范圍最小值和最大值
      let minData = this.findMinOrMax(scrollData);
      let maxData = this.findMinOrMax(scrollData, true);
      let newScrollData = [...scrollData];
      if (minIndex > minData.row) {
        // 向下滑動渲染， 找出最小值，替換成最大值，循環進行替換
        let cycle = minIndex - minData.row;
        for (let i = 0; i < cycle; i++) {
          minData = this.findMinOrMax(scrollData);
          maxData = this.findMinOrMax(scrollData, true);

          scrollData[minData.sort]['row'] = maxData.row + 1;
        }

        this.setState({scrollData: newScrollData, isCategoryToScroll: false});
      } else {
        // 向上滑動渲染
        let cycle = minData.row - minIndex;
        for (let i = 0; i < cycle; i++) {
          minData = this.findMinOrMax(scrollData);
          maxData = this.findMinOrMax(scrollData, true);

          scrollData[maxData.sort]['row'] = minData.row - 1;
        }
        this.setState({scrollData: newScrollData, isCategoryToScroll: false});
      }

    }

    let scycelScroll = compareHeight / 3;
    // 滾動一定距離，就觸發外部事件
    if (!isCategoryToScroll && Math.abs(this.prevScrollTop - eventScrollTop) > scycelScroll && this.props.onScroll) {
      this.prevScrollTop = eventScrollTop;
      let scrollIndex = 0;
      for(let i=1;i<scrollStyles.length;i++) {
        if (scrollStyles[i - 1].top <= eventScrollTop && scrollStyles[i].top > eventScrollTop) {
          scrollIndex = i;
          break;
        }
      }
      this.props.onScroll(scrollIndex);
    }

    // 處理頂部隱藏的組件
    if (this.props.onSrollTopRecommend) {
      if (scrollY > 0) {
        // 下拉
        if (event.detail.scrollTop <= scycelScroll) {
          // 展開推薦菜品
          this.props.onSrollTopRecommend && this.props.onSrollTopRecommend(true);
        }
      } else {
        // 上拉
        if (event.detail.scrollTop > scycelScroll) {
          // 觸發收起推薦菜品
          this.props.onSrollTopRecommend && this.props.onSrollTopRecommend(false);
        }
      }
    }

  }


}


export default VirtualList

在項目中的效果圖：

   

 

 使用方法說明：引入組件，添加對應的方法

<VirtualList className={'category-virtual'}
            width={width}
            height={height}
            source={source}
            rowCount={20}
            getRowHeight={this.getRowHeight}
            scrollToIndex={scrollIndex}
            onRowRender={this.onRowRender}
            onScroll={this.onScroll}
/>

/**
* 獲取行高
* @idx 數據源下標
* @value 數據
*/
getRowHeight = (idx, value) => {
   // 這里可以通過數據源的下標idx，來返回高度

   return 100; // 高度可以通過函數來計算
}

/**
* @data 數據{sort: 渲染的行數的順序, row: 渲染數據源的下標}
* @style: 樣式
* */
onRowRender = (data, style) => {
const {sort, row} = data;
const {source} = this.state;

return <View key={sort} style={style}>
   ...
</View>

}

/**
* 通過滾動
* @currentIndex 分類數組下標
* */
onScroll = (currentIndex) => {
// 通過滾動的觸發事件執行某些方法

}

 

下面提供代碼下載路徑：

　　鏈接：https://pan.baidu.com/s/1kW0w1D03N72uCE3S9Vy2zg
　　提取碼：460i