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