1. 触底加载：不只是“滚动到底部”那么简单

很多刚开始做微信小程序的朋友，一听到“触底加载”，第一反应可能就是：“哦，不就是滚动条滚到底部，然后加载更多数据嘛。” 我刚开始也是这么想的，但实际做项目的时候，才发现这里面门道不少，踩过几个坑之后，才真正理解了它的核心逻辑。

简单来说，触底加载确实是为了解决分页加载数据的问题。想象一下，你打开一个商品列表或者新闻资讯页面，如果后台有成千上万条数据，一次性全给你加载出来，用户手机可能直接就卡死了，而且流量也吃不消。所以，我们得用“分页”的方式，先加载一部分，等用户快看完的时候，再悄悄加载下一页，体验上就像数据源源不断，非常流畅。

那怎么知道用户“快看完了”呢？这就是触底加载要干的事。它的基本原理，可以拆解成三个关键要素：一个固定高度的容器、容器里内容的总高度、以及当前滚动条的位置。当“容器高度”加上“已经滚动的距离”等于或大于“内容总高度”时，我们就认为“触底”了，该加载下一页了。用公式表示就是：scrollTop + clientHeight >= scrollHeight。不过，手动去计算这些值，监听滚动事件，再判断条件，还是挺麻烦的，代码写起来也啰嗦。

好在微信小程序给我们提供了一个“神器”——scroll-view组件。它把上面这些复杂的计算和监听都封装好了，我们只需要关心“什么时候触底”和“触底后做什么”这两件事就行，大大降低了开发难度。我后面会详细讲怎么用，但你先要明白，我们利用scroll-view，本质上是在用它简化后的模型，来实现那个核心的分页加载逻辑。理解了这一点，再看代码就不会觉得是在死记硬背属性了。

2. 深入scroll-view：你的触底加载“脚手架”

scroll-view是小程序里一个可滚动的视图区域，要让它乖乖帮我们干活，首先得把它“架设”好。这里有几个属性是关键，用错了地方，效果可能就出不来。

首先，你必须给它一个确定的高度。 这是新手最容易忽略的一点。如果你不设置高度，scroll-view会默认撑开，高度等于里面所有内容的高度，那它根本就不会出现滚动条，自然也就没有“触底”一说了。我一般直接在WXSS里用height或者max-height来设定，比如height: 80vh;，让它占据屏幕80%的高度，剩下的空间放别的组件。

其次，要明确滚动方向。 我们做列表加载，绝大多数是竖向滚动，所以需要设置scroll-y="{{true}}"。如果是做横向的图片画廊之类的，才用scroll-x。这两个属性控制着滚动的轴向。

最后，也是最重要的，就是绑定那个“触底”事件。 scroll-view提供了一个非常方便的事件：bindscrolltolower（在uni-app等框架里可能是@scrolltolower）。当滚动条触底（或触右，对应横向滚动）时，这个事件就会被自动触发。我们只需要在这个事件的处理函数里，执行加载下一页数据的操作就可以了。除此之外，还有一个bindscroll事件，能实时返回滚动的详细信息，比如当前的scrollTop，如果你有更复杂的滚动交互需求（比如滚动到某个位置显示返回顶部按钮），可以用它。

这里有个我实测下来的经验：有时候在模拟器上滚动很流畅，但到了真机上，特别是安卓机，可能会感觉有点卡顿。这时候可以尝试给scroll-view加上enhanced="{{true}}"这个属性，并开启bounces="{{false}}"（iOS回弹效果），能启用增强的滚动特性，提升性能。另外，show-scrollbar属性可以控制是否显示滚动条，为了界面干净，我通常设为false。

3. 从零开始：手把手搭建触底加载列表

光说不练假把式，我们直接来看代码。假设我们要做一个简单的新闻列表，每次加载10条，触底自动加载下一页。

第一步，搭建WXML结构。 这里我们用scroll-view包裹一个列表，用wx:for来循环渲染每一项。

<!-- 页面结构 -->
<view class="container">
  <!-- 这里可以放一些固定的头部，比如搜索栏、分类标签 -->
  <view class="header">新闻列表</view>

  <!-- 核心的scroll-view区域 -->
  <scroll-view
    class="news-list"
    scroll-y="{{true}}"
    bindscrolltolower="loadMore" <!-- 绑定触底事件 -->
    style="height: 80vh;" <!-- 必须设置固定高度 -->
  >
    <view wx:for="{{newsList}}" wx:key="id" class="news-item">
      <image src="{{item.coverUrl}}" mode="aspectFill"></image>
      <text class="title">{{item.title}}</text>
      <text class="summary">{{item.summary}}</text>
    </view>

    <!-- 加载状态提示 -->
    <view wx:if="{{isLoading}}" class="loading-text">正在加载更多...</view>
    <view wx:if="{{hasMore == false && newsList.length > 0}}" class="no-more-text">已经到底了，没有更多内容啦~</view>
    <view wx:if="{{newsList.length === 0 && !isLoading}}" class="empty-text">暂无内容</view>
  </scroll-view>
</view>

第二步，编写WXSS样式。 主要是给scroll-view定高，以及美化列表项。

/* 样式部分 */
.container {
  padding: 20rpx;
}

.news-list {
  /* 高度已在标签内联样式设置，这里可以加边框、背景色等 */
  background-color: #f9f9f9;
  border-radius: 12rpx;
}

.news-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.news-item image {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.summary {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.loading-text, .no-more-text, .empty-text {
  text-align: center;
  padding: 40rpx 0;
  font-size: 28rpx;
  color: #999;
}

第三步，编写JS逻辑。 这是核心，包含了数据管理、加载状态和请求逻辑。

// pages/news/news.js
Page({
  data: {
    newsList: [], // 当前已加载的新闻列表
    currentPage: 1, // 当前页码
    pageSize: 10, // 每页条数
    total: 0, // 服务器返回的数据总数
    isLoading: false, // 是否正在加载中（防止重复请求）
    hasMore: true, // 是否还有更多数据
  },

  onLoad() {
    // 页面加载时，先加载第一页数据
    this.loadNewsData();
  },

  // 加载新闻数据的通用方法
  async loadNewsData() {
    // 1. 如果正在加载，或者没有更多数据了，就直接返回，防止重复请求
    if (this.data.isLoading || !this.data.hasMore) {
      return;
    }

    // 2. 显示加载状态
    this.setData({ isLoading: true });

    // 3. 模拟网络请求，实际项目中替换为 wx.request
    try {
      // 这里用setTimeout模拟网络延迟
      const mockData = await this.mockApiRequest(this.data.currentPage, this.data.pageSize);

      // 4. 请求成功后的处理
      if (mockData.code === 200) {
        const newList = mockData.data.list;
        const total = mockData.data.total;

        // 合并新旧数据
        const updatedList = this.data.newsList.concat(newList);
        this.setData({
          newsList: updatedList,
          total: total,
          // 判断是否还有下一页：已加载数量 < 总数
          hasMore: updatedList.length < total,
        });

        // 5. 页码自增，为下一次加载做准备
        if (newList.length > 0) {
          this.setData({ currentPage: this.data.currentPage + 1 });
        }
      } else {
        // 处理请求失败，比如弹出Toast提示
        wx.showToast({ title: '加载失败，请重试', icon: 'none' });
      }
    } catch (error) {
      console.error('请求出错:', error);
      wx.showToast({ title: '网络异常', icon: 'none' });
    } finally {
      // 6. 无论成功失败，都关闭加载状态
      this.setData({ isLoading: false });
    }
  },

  // 触底加载事件处理函数
  loadMore() {
    console.log('触发触底加载，开始加载下一页');
    this.loadNewsData();
  },

  // 模拟API请求的函数
  mockApiRequest(page, pageSize) {
    return new Promise((resolve) => {
      setTimeout(() => {
        // 模拟生成一些假数据
        const list = [];
        const startIndex = (page - 1) * pageSize;
        for (let i = 1; i <= pageSize; i++) {
          list.push({
            id: startIndex + i,
            title: `新闻标题 ${startIndex + i}`,
            summary: `这里是新闻摘要内容，用于模拟长文本。当前是第${page}页的第${i}条数据。`,
            coverUrl: `https://picsum.photos/300/200?random=${startIndex + i}`, // 随机图片
          });
        }
        // 假设总共有50条数据
        const total = 50;
        resolve({
          code: 200,
          data: { list, total },
          message: 'success'
        });
      }, 800); // 模拟800ms网络延迟
    });
  },
});

这段代码就是一个最基础、最完整的触底加载实现。它有几个关键点：第一，用isLoading锁防止在请求未完成时重复触发；第二，用hasMore根据服务器返回的总数判断是否还能继续加载，避免无意义的请求；第三，数据合并用的是concat方法，不会破坏原有数据的引用，符合小程序的数据响应规则。

4. 避坑指南：那些我踩过的“雷”和优化技巧

照着上面的代码做，基本功能肯定能跑起来。但想做得更稳、体验更好，还得注意下面这些我实际开发中遇到过的问题。

第一个坑：快速连续滚动触发多次触底。 用户如果飞速滑动列表，scrolltolower事件可能在极短时间内被触发多次。如果没做防护，就会同时发出多个网络请求，不仅浪费资源，还可能导致数据错乱（比如页码混乱）。我的解决方案就是上面代码里的isLoading锁。在开始请求前检查，如果已经在加载中，就直接return。这是必须加的保险。

第二个坑：列表数据量极大时的性能问题。 随着用户不断下滑，newsList数组会越来越大，直接渲染上千个节点，页面肯定会变卡。这时候就需要引入虚拟列表的概念。不过，小程序原生的scroll-view并不直接支持虚拟列表。一个折中的优化方案是，我们可以只渲染当前可视区域及前后一定缓冲区的数据。但更常见的做法是，对于超长列表，会提示用户进行筛选或搜索，或者像某些App一样，列表最多加载比如100条，之后提示“仅显示部分结果，请尝试更精确的搜索”。这需要产品和后端一起讨论方案。

第三个坑：空状态和加载失败处理。 用户体验很重要。列表为空时，应该显示一个友好的提示图和文案，而不是一片空白。加载失败时，不能只是静默失败，至少要给个Toast提示，更好的做法是提供一个“点击重试”的按钮。我在上面的代码里简单加了empty-text和错误Toast，在实际项目中，这部分UI可以做得更精美。

第四个技巧：结合自定义下拉刷新。 scroll-view从基础库2.10.1开始支持了原生的自定义下拉刷新（refresher-enabled）。这可以和触底加载完美搭配。下拉刷新通常重置页码（currentPage: 1）、清空列表（newsList: []），然后重新加载第一页数据。注意处理好刷新动画（refresher-triggered）的状态。这样，一个完整的“下拉刷新-触底加载”列表闭环就做好了，体验非常接近原生App。

第五个注意点：scroll-view的高度计算。 如果你的页面布局复杂，scroll-view的高度需要动态计算（比如减去顶部导航和底部Tab栏的高度），最好在onLoad或onReady生命周期里，用wx.createSelectorQuery()去获取其它组件的高度，然后动态设置scroll-view的样式。固定写死80vh在某些机型或布局下可能不准确。

把这些坑都避开，优化点都考虑到，你的触底加载功能就不仅“能用”，而且“好用”了。其实很多细节都是在实际项目迭代中慢慢打磨出来的，比如加载中的动画样式、触底提示文案的趣味性等等，这些小细节往往最能提升产品的质感。