微信小程序详解下拉加载与上拉刷新实现方法_网络技术

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

实现效果图：

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

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

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

设置js里onPullDownRefresh和onReachBottom方法

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

下拉加载说明：

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

onPullDownRefresh(){
　　console.log('--------下拉刷新-------')
　　wx.showNavigationBarLoading() //在标题栏中显示加载
 
　　wx.request({
     url: 'https://URL',
     data: {},
     method: 'GET',
     // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
     // header: {}, // 设置请求的 header
     success: function(res){
      // success
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
     }
  })

方法二：

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

属性	类型	描述
bindscrolltoupper	EventHandle	滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle	滚动到底部/右边，会触发 scrolltolower 事件

index.wxml

<!--index.wxml-->
<view class="container" style="padding:0rpx">
 <!--垂直滚动，这里必须设置高度-->
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
    class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.pic_url}}"></image>
      <view class="text">
        <text class="title">{{item.name}}</text>
        <text class="description">{{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
      加载中...
    </loading>
  </view>
</view>

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;


// 请求数据
var loadMore = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url:url,
    data:{
      page : page,
      page_size : page_size,
      sort : sort,
      is_easy : is_easy,
      lange_id : lange_id,
      pos_id : pos_id,
      unlearn : unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0; i < res.data.list.length; i++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list : list
      });
      page ++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
 data:{
  hidden:true,
  list:[],
  scrollTop : 0,
  scrollHeight:0
 },
 onLoad:function(){
  //  这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       that.setData({
         scrollHeight:res.windowHeight
       });
     }
   });
    loadMore(that);
 },
 //页面滑动到底部
 bindDownLoad:function(){  
   var that = this;
   loadMore(that);
   console.log("lower");
 },
 scroll:function(event){
  //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
   this.setData({
     scrollTop : event.detail.scrollTop
   });
 },
 topLoad:function(event){
  //  该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
   page = 0;
   this.setData({
     list : [],
     scrollTop : 0
   });
   loadMore(this);
   console.log("lower");
 }
})

index.wxss

/**index.wxss**/

.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

/**/

scroll-view {
 width: 100%;
}

.item {
 width: 90%;
 height: 300rpx;
 margin: 20rpx auto;
 background: brown;
 overflow: hidden;
}

.item .img {
 width: 430rpx;
 margin-right: 20rpx;
 float: left;
}

.title {
 font-size: 30rpx;
 display: block;
 margin: 30rpx auto;
}

.description {
 font-size: 26rpx;
 line-height: 15rpx;
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序下拉加载 # 上拉刷新 # 上拉刷新几种方法 # 上拉刷新实例详解 # 微信小程序实现触底加载与下拉刷新的示例代码 # 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】 # 微信小程序列表的上拉加载和下拉刷新的实现 # 微信小程序下拉加载和上拉刷新两种实现方法详解 # 微信小程序 scroll-view实现上拉加载与下拉刷新的实例 # 微信小程序实现列表下拉刷新上拉加载 # 微信小程序（六）：列表上拉加载下拉刷新示例 # 详解微信小程序开发之下拉刷新上拉加载 # 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析 # 微信小程序实现触底加载 # 加载 # 定了 # 两种 # 要在 # 要注意 # 希望能 # 谢谢大家 # 栏中 # 加载中 # 必须要 # 事件中 # hideNavigationBarLoading # scroll # EventHandle # bindscrolltoupper # view # bindscrolltolower # complete # CONNECT # TRACE

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序详解下拉加载与上拉刷新实现方法