你可能不知道的四种快速实现上滑触底加载效果方法！

2023-10-15 06:44:26

实现上滑触底加载效果，是智能小程序开发过程中一个十分常见的操作。

本文将介绍四种快速实现上滑触底加载效果的方法，并提供相应的技术细节和代码示例。这些方法包括使用 JavaScript 和 CSS 实现、使用 HTML5 实现、使用微信小程序 API 实现，以及使用第三方库实现。

希望通过本文，能够帮助开发者快速掌握上滑触底加载效果的实现方法，并在实际项目中熟练运用。

方法一：使用 JavaScript 和 CSS 实现

1. HTML 代码

<div id="container">
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div id="loading">Loading...</div>
</div>

2. CSS 代码

#container {
  height: 100vh;
  overflow: auto;
}

#list {
  list-style-position: inside;
  padding: 0;
}

#loading {
  display: none;
  text-align: center;
  font-size: 20px;
}

3. JavaScript 代码

const list = document.getElementById('list');
const loading = document.getElementById('loading');

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
    loading.style.display = 'block';
    // 这里执行加载更多数据的操作
    setTimeout(() => {
      loading.style.display = 'none';
      // 这里更新列表中的数据
    }, 1000);
  }
});

方法二：使用 HTML5 实现

1. HTML 代码

<div id="container">
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div id="loading">Loading...</div>
</div>

2. CSS 代码

#container {
  height: 100vh;
  overflow: auto;
}

#list {
  list-style-position: inside;
  padding: 0;
}

#loading {
  display: none;
  text-align: center;
  font-size: 20px;
}

3. JavaScript 代码

const list = document.getElementById('list');
const loading = document.getElementById('loading');

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
    loading.style.display = 'block';
    // 这里执行加载更多数据的操作
    setTimeout(() => {
      loading.style.display = 'none';
      // 这里更新列表中的数据
    }, 1000);
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 这里执行加载更多数据的操作
        setTimeout(() => {
          loading.style.display = 'none';
          // 这里更新列表中的数据
        }, 1000);
      }
    });
  });

  observer.observe(loading);
});

方法三：使用微信小程序 API 实现

1. WXML 代码

<view class="container">
  <scroll-view
    id="list"
    scroll-y="true"
    on-scrolltoupper="onScrollToUpper"
    on-scrolltolower="onScrollToLower"
  >
    <block wx:for="{{list}}" wx:key="*this">
      <view class="item">{{item}}</view>
    </block>
  </scroll-view>
  <view class="loading" hidden="{{loading}}">Loading...</view>
</view>

2. WXSS 代码

.container {
  height: 100vh;
}

.list {
  height: 100%;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.loading {
  text-align: center;
  font-size: 20px;
}

3. JavaScript 代码

Page({
  data: {
    list: ['Item 1', 'Item 2', 'Item 3'],
    loading: false,
  },

  onScrollToUpper() {
    console.log('滚动到顶部');
  },

  onScrollToLower() {
    if (!this.data.loading) {
      this.setData({ loading: true });

      setTimeout(() => {
        this.setData({
          list: [...this.data.list, ...['Item 4', 'Item 5', 'Item 6']],
          loading: false,
        });
      }, 1000);
    }
  },
});

方法四：使用第三方库实现

1. 安装第三方库

npm install infinite-scroll

2. 在 HTML 中引入第三方库

<script src="node_modules/infinite-scroll/dist/infinite-scroll.pkgd.min.js"></script>

3. 初始化第三方库

const infiniteScroll = new InfiniteScroll('.list', {
  // 加载更多数据的回调函数
  loadMore: (resolve, reject) => {
    setTimeout(() => {
      resolve(['Item 4', 'Item 5', 'Item 6']);
    }, 1000);
  },
  // 加载更多数据时显示的加载中元素
  loading: '.loading',
});