微信小程序滚动到底部加载新数据

最新推荐文章于 2025-09-13 13:52:40 发布

原创

最新推荐文章于 2025-09-13 13:52:40 发布 · 5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍如何在微信小程序中实现滚动到底部自动加载更多数据的功能。通过使用scroll-view组件结合bindscrolltolower事件，配合js逻辑处理，可以轻松实现数据的分页加载。

最近在玩微信小程序
然后实现一个滚动到底部加载数据的功能
微信小程序呢还是挺简单的，只要看懂文档基本上都可以学会
那么直接上代码吧

wxml部分

<scroll-view scroll-y='true' style="height:{
  
  {height}}px;" bindscrolltolower='lower'>
     <view wx:for="{
  
  {lists}}" wx:key="index" class="list">
      {
  
  {item.name}}+{
  
  {index+1}}
    </view>
</scroll-view>
这里的height使用
可使用窗口高度，即：屏幕高度(screenHeight) - 导航(tabbar)高度
在js里面获取的

// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},