您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序怎么解决上万条列表渲染卡顿

微信小程序怎么解决上万条列表渲染卡顿

要解决上万条列表渲染卡顿的问题,可以尝试以下几种方法:


1. 分页加载:将列表分为多页,每次只渲染当前页的数据,这样可以减少一次性加载大量数据造成的卡顿。

// 分页加载
Page({
  data: {
    pageNum: 1, // 当前页码
    pageSize: 20, // 每页显示数量
    listData: [], // 列表数据
    isLoading: false, // 是否正在加载数据
  },

  onLoad() {
    this.loadData()
  },

  // 加载数据
  loadData() {
    if (this.data.isLoading) return
    this.setData({ isLoading: true })

    wx.request({
      url: 'https://example.com/api/list',
      data: {
        page: this.data.pageNum,
        size: this.data.pageSize,
      },
      success: res => {
        const newData = res.data.listData
        const listData = this.data.listData.concat(newData)
        const pageNum = this.data.pageNum + 1

        this.setData({ listData, pageNum, isLoading: false })
      },
      fail: () => {
        this.setData({ isLoading: false })
        wx.showToast({ title: '加载失败', icon: 'none' })
      },
    })
  },
})



2. 虚拟滚动:只渲染当前可视区域内的数据,随着滚动不断更新列表内容,这样可以避免渲染大量不可见的数据造成的卡顿。

// 虚拟滚动
Page({
  data: {
    scrollTop: 0, // 滚动距离
    listData: [], // 列表数据
    itemHeight: 50, // 列表项高度
    visibleCount: 10, // 可见列表项数量
  },

  onLoad() {
    this.loadData()
  },

  // 加载数据
  loadData() {
    wx.request({
      url: 'https://example.com/api/list',
      success: res => {
        const listData = res.data.listData

        this.setData({ listData })
      },
      fail: () => {
        wx.showToast({ title: '加载失败', icon: 'none' })
      },
    })
  },

  // 监听滚动事件
  onScroll(e) {
    const { scrollTop } = e.detail
    this.setData({ scrollTop })
  },

  // 计算可见列表项索引范围
  getVisibleRange() {
    const { scrollTop, itemHeight, visibleCount } = this.data
    const start = Math.floor(scrollTop / itemHeight)
    const end = start + visibleCount

    return { start, end }
  },
})


3. 优化列表项:尽可能减少每个列表项的渲染复杂度,避免使用过多的嵌套和计算操作。


4. 使用缓存:将已经渲染过的列表项缓存起来,下次需要渲染时直接使用缓存数据,可以减少重复计算和渲染时间。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了