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

方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里

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

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

设置js里onPullDownRefresh和onReachBottom方法

下拉加载说明：

当处理完数据刷新后，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实现微信小程序下拉

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;
 // 请求数据<br> var loadMore = function(that){
 that.setData({
 hidden:false
 });
 wx.request({
 url:url,<br> 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");
 }<br> })

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

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