微信小程序—下拉刷新上拉加载

最新推荐文章于 2025-10-09 14:02:27 发布

原创最新推荐文章于 2025-10-09 14:02:27 发布 · 8.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #小程序

微信小程序专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在微信小程序中实现下拉刷新和上拉加载功能，包括使用scroll-view组件结合bindscrolltolower和bindscrolltoupper事件实现，以及通过onPullDownRefresh接口实现下拉刷新。

1.使用scroll-view实现下拉刷新上拉加载

<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad"  bindscrolltoupper="refresh">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.image}}"></image>
      <view class="text">
        <text class="title">{{item.title}}</text>
        <text class="description">{{item.pubdate}}"</text>
      </view>
    </view>
  </scroll-view>

先写一个布局类似于android 的listview item的布局外边用scroll-view包裹。item布局样式用css去实现。
scroll-view 熟悉介绍参考官方文档这里写链接内容

注意：使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。设定高度才能监听到滑动事件。
通过bindscrolltolower=”bindDownLoad” bindscrolltoupper=”refresh”实现下拉刷新和上拉加载。

高度的获得

onLoad: function () {
    //   这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.info(res.windowHeight);
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
  },

或者在onshow方法中

2.通过 onPullDownRefresh实现

注意：onPullDownRefresh和scroll-view不能同时使用

需要在 .json 文件中配置。(.json 文件的格式和 app.json与具体页面的.json文件的区别，前文已经讲过，有疑问的可以移步。) 如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。

具体页面的.json文件：

{
    "enablePullDownRefresh": true
}

app.json文件:

"window": {
    "enablePullDownRefresh": true
  }

在js文件中添加回调函数

// 下拉刷新回调接口
    onPullDownRefresh: function () {
        // do somthing
    },

3 .上拉加载

同下拉刷新一样，小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍，经测试发现，上拉回调的接口并不需要额外的配置（下拉时需要在 .json文件中配置 “enablePullDownRefresh”: true），直接在页面滑动到底部时就能拿到回调。

在js文件中添加回调函数

// 上拉加载回调接口
    onReachBottom: function () {
    },

var items = that.data.list.concat(res.data.books);
      that.setData({
        list: items,
      });

通过concat方法进行数组的连接，实现上拉更多。

隐藏scroll-view滚动条

在相应的css文件中加入一下代码

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}