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

最新推荐文章于 2024-10-08 08:38:42 发布

qwy0419

最新推荐文章于 2024-10-08 08:38:42 发布

阅读量1.4k

点赞数 1

分类专栏： weixin

本文链接：https://blog.csdn.net/qwy0419/article/details/80473504

版权

weixin 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小程序的下拉刷新和上拉加载文档中也有介绍：

言归正传，那么若想实现下拉刷新这个功能，首先需要在json中写入

{
"enablePullDownRefresh":true,
  "backgroundColor":"red"
}

在这里楼主把下拉刷新的背景改为了红色，效果如图：

其中前台wxml代码如下：

<view class="page">
  <view class="page__bd">
    <view class="weui-panel weui-panel_access">
      <view class='nav'>
        <!-- <navigator> 
          <view class="weui-panel__hd">学生列表</view>
        </navigator>  -->
        <form > 
          <view class="search">
              <input confirm-type="search" placeholder="搜索学号/姓名" bindinput='input' value="{{condition}}"/>
              <button form-type='submit' size="mini" bindtap='search'>搜索</button>
          </view>
        </form> 
      </view>
      <view class="weui-panel__bd" wx:for="{{student}}">
        <navigator url="../login/login?id={{item.id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
          <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
            <image class="weui-media-box__thumb" src="{{item.path}}" />
          </view>
          <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <view class="weui-media-box__title">{{item.no}}</view>
            <view class="weui-media-box__desc">  {{item.name}}  {{item.sex}}  {{item.age}}</view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</view>

js代码如下：

const app = getApp();
var page = 1;
var isfinish = false;
function loadmore(that) {
  if (isfinish) return;
  wx.showLoading({
    title: '加载中',
  })
  wx.request({
    url: xxx,
    data: {
      page: page
    },
    success: (res) => {
      wx.hideLoading();
      if (res.data.length > 0) {
        var student = that.data.student;
        for (var i = 0; i < res.data.length; i++) {
          student.push(res.data[i]);
        }
        that.setData({ student: student })
        page++;
      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
      // console.log(res.data)
    }
  })
}
Page({
  data: {
    student: []
  },

//下拉刷新
  onPullDownRefresh: function () {
    // console.log(111);
    page = 1;
    isfinish = false;
    this.setData({ student: [] });
    loadmore(this);
  },

//上拉加载
  onReachBottom: function () {
    // console.log(222);
    var that = this;
    loadmore(that);
  },
  onLoad: function () {
    loadmore(this);
  }
})

上拉加载就是当你设置的是一页显示10 个内容，当再次往下滑的时候就会显示出来第11-20的内容，以此类推，直到最后。