微信小程序实现触底加载

下面是详细讲解“微信小程序实现触底加载”的完整攻略：

一、背景

随着微信小程序的普及，越来越多的开发者开始尝试开发小程序。而在小程序中，常常需要实现触底加载的功能，即当用户滚动到页面底部时，自动加载更多数据。这一功能对于提升用户体验、提高应用性能，非常重要。

二、实现思路

实现触底加载的基本思路如下：

1. 在页面的wxml文件中，使用scroll-view组件，将需要显示内容的部分包裹起来，设置scroll-view的bindscrolltolower事件，当滚动到底部时自动触发。
2. 在对应的js文件中，实现获取数据的方法，并将数据拼接到原数据之后。最后通过setData方法更新页面显示数据。

具体实现过程，可以参考以下两个示例：

三、示例1

以下是一个简单的实现触底加载的示例代码：

1. wxml代码

<scroll-view scroll-y="true" lower-threshold="20" bindscrolltolower="loadMore">
  <view wx:for="{{list}}" wx:key="{{index}}" class="item">
    <text>{{item}}</text>
  </view>
</scroll-view>

2. js代码

Page({
  data: {
    list: [], //存放数据的数组
    page: 0, //当前页数
    pageSize: 10 //每页显示条目数
  },
  //页面加载完成时自动调用
  onLoad() {
    this.loadData();
  },
  //获取数据方法
  loadData() {
    //模拟请求数据
    wx.showLoading({
      title: 'Loading...'
    });
    setTimeout(() => {
      let newData = [];
      for(let i = 0; i < this.data.pageSize; i++) {
        newData.push(`Item ${i+1+this.data.page*this.data.pageSize}`);
      }
      this.setData({
        page: this.data.page + 1,
        list: [...this.data.list, ...newData]
      });
      wx.hideLoading();
    }, 1000)
  },
  //滚动到底部时触发，加载更多数据
  loadMore() {
    this.loadData();
  }
})

以上示例中，我们使用scroll-view组件将需要显示的内容包裹起来，并设置了lower-threshold属性为20，在滚动距离底部小于20px时就会触发loadMore方法。在js文件中，我们定义了list数组存储显示数据，并使用loadData方法获取数据，将获取到的数据拼接到原数组中。在滚动到底部时，就会触发loadMore方法，自动调用loadData方法加载更多数据，然后通过setData方法更新页面显示数据。

四、示例2

以下示例是一个稍微复杂一些的实现触底加载的代码：

1. wxml代码

<scroll-view scroll-y="true" lower-threshold="30" bindscrolltolower="loadMore">
  <view wx:for="{{list}}" wx:key="{{index}}" class="item">
    <image src="{{item.avatarUrl}}" mode="aspectFit"></image>
    <view class="info">
      <text class="name">{{item.name}}</text>
      <text class="desc">{{item.desc}}</text>
    </view>
  </view>
  <view wx:if="{{loading}}" class="loading">
    <text>Loading...</text>
  </view>
</scroll-view>

2. js代码

Page({
  data: {
    list: [], //存放数据的数组
    page: 1, //当前页数
    pageSize: 10, //每页显示条目数
    loading: false //是否正在加载数据
  },
  //页面加载完成时自动调用
  onLoad() {
    this.loadData();
  },
  //获取数据方法
  loadData() {
    if(this.data.loading) { //判断是否正在请求数据
      return;
    }
    this.setData({
      loading: true
    });
    //模拟请求数据
    setTimeout(() => {
      let newData = [];
      for(let i = 0; i < this.data.pageSize; i++) {
        newData.push({
          avatarUrl: 'https://picsum.photos/50/50',
          name: `Name ${i+1+(this.data.page-1)*this.data.pageSize}`,
          desc: `Desc ${i+1+(this.data.page-1)*this.data.pageSize}`
        });
      }
      this.setData({
        page: this.data.page + 1,
        list: [...this.data.list, ...newData],
        loading: false
      });
    }, 1000)
  },
  //滚动到底部时触发，加载更多数据
  loadMore() {
    this.loadData();
  }
})

以上示例中，我们使用了scroll-view组件、image、text等常见组件，还对loading状态进行了控制。在loadData方法中，我们通过判断loading状态来避免重复请求数据，在获取数据成功后，再将loading状态设置为false。同时，我们也更改了获取到的数据格式，使用了一个对象来分别存储头像、名称和描述文字。这个示例还使用了一个简单的样式，将loading状态进行可视化地展示出来。

五、总结

通过以上两个示例，我们可以看到实现触底加载其实并不难，只要理解其基本思路，掌握相关的API，就可以轻松实现。在实现时，我们还可以灵活运用样式、控制loading状态、使用promise等方式来优化我们的代码，提高用户体验。