小程序上拉加载更多实现技巧及注意事项

一、选取适当的加载标志

实现上拉加载更多首先要选择合适的标志来指示用户，一个好的标志可以增加用户的体验。常见的标志方式包括：文字提示、loading图标、骨架屏等，而且这些方式可以组合使用，比如同时使用loading图标和文字提示。

代码示例：

// wxml

  
   
    
    加载更多
    
    
    
     加载中
     
     
    
  
   
  
   
    
    没有更多了
    
  
   

  

// wxss
.load-more {
  display: block;
  margin-top: 20rpx;
  text-align: center;
}
.loading-box {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.loading-text {
  font-size: 34rpx;
  color: #999;
  margin-right: 10rpx;
}
.loading-img {
  animation: rotation 1.5s linear infinite;
  height: 36rpx;
  width: 36rpx;
}

.no-more__text {
  font-size: 34rpx;
  margin-top: 40rpx;
  color: #999;
}

二、使用scroll-view组件

scroll-view是小程序自带的可滚动视图容器组件，可以让我们实现上下左右滑动的效果。使用scroll-view组件时，需要注意的是设置scrollView的高度和触发 scrolltolower 事件的阈值。因为scroll-view默认高度为200px，因此我们可能需要手动设置高度。

代码示例：

// wxml

  

  

// wxss
.scroll-view {
  height: 100%;
}

三、优化列表渲染

当加载更多时，需要新增数据进行渲染，这将导致重新渲染整个列表，而且当数据量庞大时会导致卡顿。解决这个问题的最常见方法是分批次加载数据，比如一次只加载10条，当用户拉到底部时再继续加载10条数据。此外，可以使用小程序官方提供的wx:key属性，让列表渲染时有一个唯一的标识，这样可以避免出现重复渲染的情况。

代码示例：

// wxml

  
   
    
  
   

  

// js
Page({
  data: {
    list: [], // 列表数据
    pageNum: 1, // 当前请求的页码
    limit: 10, // 每页请求的条数
    isLoading: false, // 是否正在加载
    isEnd: false // 是否没有更多数据了
  },
  onReachBottom: function() {
    // 已经全部加载完毕
    if (this.data.isEnd) return

    // 正在加载中
    if (this.data.isLoading) return

    // 开始加载
    this.setData({
      isLoading: true
    })
    this.loadData()
  },
  loadData(pageNum) {
    // 发起请求
    wx.request({
      url: 'xxxxxxx',
      data: {
        pageNum,
        limit: this.data.limit
      },
      success: (res) => {
        const {data} = res.data;
        let list = [];
        if(this.pageNum == 1) {
          list = data;
        } else {
          list = this.data.list.concat(data);
        }
        this.setData({
           list,
           pageNum: pageNum +1,
           isLoading: false,
           isEnd: data.length < this.data.limit ? true: false
        });
      },
      fail: (res) => {
        wx.showToast({
          title: '数据获取失败',
          icon: 'none',
          duration: 1500
        });
      }
    });
  }
})

四、注意事项

上拉加载更多要注意以下几点：

1、保持UI友好：当没有更多数据时应该给出明确的提示，这样用户不会一直拉动列表却发现没有新数据。

2、避免滥用loading：一个好的用户体验应该是迅速地获得想要的内容，而不是一直等待loading。

3、节流与防抖：在触发scrolltolower事件的时候，可能会出现用户希望连续加载的情况，此时可以通过节流或防抖的方式来延迟函数的触发。