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

最新推荐文章于 2023-06-01 10:41:37 发布

原创

最新推荐文章于 2023-06-01 10:41:37 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了微信小程序中实现下拉刷新和上拉加载的两种方法。第一种利用onPullDownRefresh和onReachBottom方法，在JSON配置文件中设置window属性，并在JS中处理相关事件。下拉加载完成后调用wx.stopPullDownRefresh停止刷新。第二种方法是在scroll-view组件中使用bindscrolltoupper和bindscrolltolower事件来触发刷新和加载。

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

微信小程序下拉刷新上拉加载的两种实现方法

方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

属性	类型	描述
enablePullDownRefresh	Boolean	是否开启下拉刷新，详见页面相关事件处理函数。

设置js里onPullDownRefresh和onReachBottom方法

属性	类型	描述
onPullDownRefresh	function	页面相关事件处理函数——监听用户下拉动作
onReachBottom	function	页面上拉触发底事件的处理函数

下拉加载说明：

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

 
           onPullDownRefresh(){ 
             
           　　console.log( 
           '--------下拉刷新-------' 
           ) 
          
           　　wx.showNavigationBarLoading()  
           //在标题栏中显示加载 
          
           　　wx.request({ 
             
           url: