Taro小程序picker动态加载数据：分段请求，提升性能

2023-09-11 19:00:42

问题背景

在Taro小程序中，picker组件常用于让用户从选项列表中选择。当picker中的数据量较小时，一次性将所有数据加载到picker中并不会对性能造成明显的负面影响。然而，当数据量较大时，一次性加载所有数据就会变得非常耗时，可能导致picker组件的响应变得迟缓。

2. 解决方法：分段请求

为了解决picker数据量较大时的性能问题，我们可以采用分段请求的方式来动态加载数据。具体步骤如下：

首先，我们需要将picker中的数据分成多个片段。每一段数据的大小应根据具体的业务需求和实际情况来确定。
然后，我们可以在picker组件中设置一个滚动事件监听器。当用户滚动picker组件时，监听器会触发相应的回调函数。
在回调函数中，我们可以根据picker组件当前的滚动位置来判断用户目前正在查看哪一段数据。
如果用户正在查看的片段不在当前已加载的数据中，则我们可以向服务器发送请求，加载该片段的数据。
当服务器返回数据后，我们可以在picker组件中更新数据，并显示加载的新数据。

3. 实现示例

下面是一个分段请求Taro小程序picker数据加载的示例代码：

import Taro, { Component } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'

export default class MyPicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      currentPage: 1,
      pageSize: 10,
      hasMore: true
    }

    this.handlePickerScroll = this.handlePickerScroll.bind(this)
  }

  componentDidMount() {
    this.loadMoreData()
  }

  handlePickerScroll() {
    const { currentPage, pageSize, hasMore } = this.state
    const pickerHeight = Taro.getSystemInfoSync().windowHeight - 50

    // 滚动到底部时加载更多数据
    if (pickerHeight * currentPage >= this.$refs.picker.scrollHeight && hasMore) {
      this.loadMoreData()
    }
  }

  loadMoreData() {
    const { currentPage, pageSize } = this.state

    Taro.request({
      url: '/api/picker/data',
      data: {
        page: currentPage,
        size: pageSize
      }
    }).then(res => {
      const { data, total } = res.data

      this.setState({
        data: [...this.state.data, ...data],
        currentPage: currentPage + 1,
        hasMore: total > currentPage * pageSize
      })
    })
  }

  render() {
    const { data } = this.state

    return (
      <View>
        <Picker ref='picker' onScroll={this.handlePickerScroll}>
          {data.map(item => (
            <Picker.View key={item.id}>{item.name}</Picker.View>
          ))}
        </Picker>
      </View>
    )
  }
}