小程序局部分页上拉加载

首先看页面效果我这里是带有搜索框和时间选择并且列表上拉刷新的页面，顶部搜索框和审核情况框和时间栏固定，下面列表固定滑动，不会整个页面滚动，并且实现分页上拉加载

在wxml文件中写以下代码：

<view class="allBox">

<view class="searchBox" wx:if="{{showIconBox}}" bindtap="showIptImgBox">

<icon class="searchcion" size='27' type='search' class="searchIcon"></icon>

<view class="searchView">搜索</view>

</view>

<view wx:if="{{showImgBox}}" class="searchBox1">

<input class="searchIpt" focus value="{{infoValue}}" bindinput="bindKeyInput" bindblur="blurInput"/>

</view>

<view class="detailMiddle">

<view class="middleTitle">

<text class="caseText">审核情况</text>

<text class="totalText">总计：{{total}}</text>

</view>

<view class="middleDetail">

<view class="detail">

<text class="count1">{{count1}}</text>

<view class="countText">通过</view>

</view>

<view class="line"></view>

<view class="detail">

<text class="count2">{{count2}}</text>

<view class="countText">未通过</view>

</view>

<view class="line"></view>

<view class="detail">

<text class="count3">{{count3}}</text>

<view class="countText">收费</view>

</view>

</view>

</view>

<view class="section">

<picker mode="date" end="2020-06-15" value="{{date}}" bindchange="bindDateChange">

<view class="picker">

{{date}}

<image src="../../../images/downIcon.png" class="downIcon"></image>

</view>

</picker>

</view>

<scroll-view scroll-y="true" scroll-with-animation="true" scroll-anchoring="true" bindscrolltolower="lower" class="bottomBox">

<view class="personInfo" wx:for="{{userOptions}}" wx:key="index">

<view class="namePhoneBox">

<text class="personName">{{item.name}}</text>

<view class="rightInfo" bindtap="toPargicularsPage" data-unionid="{{item.unionid}}">

<text class="personPhone">{{item.phone}}</text>

<image src="../../../images/more.png" class="moreIcon"></image>

</view>

</view>

<view class="personTime">{{item.compare_time}}</view>

</view>

<view wx:if="{{showBottomText}}" class="warnText">没有更多数据啦</view>

</scroll-view>

</view>

在wxss文件中写上样式：（此样式仅供参考）

.searchBox,
.searchBox1 {
  margin-top: 30rpx;
  690rpx;
  height:70rpx;
  background:rgba(238,238,238,1);
  border-radius:10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchView {
  font-size:34rpx;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(147,147,148,1);
  line-height:37rpx;
}
.searchIpt {
  690rpx;
  height:70rpx;
  text-align: left;
  font-size:34rpx;
  font-family:PingFang SC;
  font-weight:400;
  line-height:37rpx;
}
.searchIcon,
.searchImg {
  text-align: center;
  margin-right: 11rpx;
}
.detailMiddle {
   690rpx;
  height: 248rpx;
  background-color: #fff;
  z-index: 1;
  margin-top: 36rpx;
  border-radius: 10rpx;
  box-shadow:0rpx 4rpx 13rpx 0rpx rgba(12,54,81,0.2);
}
.middleTitle {
  margin: 30rpx 35rpx;
}
.caseText {
  142rpx;
  height:34rpx;
  font-size:36rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  line-height:36rpx;
  text-align: left;
}
.totalText {
  float: right;
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(153,153,153,1);
  line-height:36rpx;
}
.middleDetail {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 51rpx;
}
.line {
  2rpx;
  height:42rpx;
  background:rgba(236,236,236,1);
}
.detail {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
.count1 {
  font-size:48rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(55,178,102,1);
  line-height:36rpx;
}
.count2 {
  font-size:48rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(224,51,51,1);
  line-height:36rpx;
}
.count3 {
  font-size:48rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,149,224,1);
  line-height:36rpx;
}
.countText {
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(153,153,153,1);
  line-height:36rpx;
  margin-top: 23rpx;
}
.section {
   100%;
  font-size:28rpx;
}
.picker {
  text-align: left;
  margin: 56rpx 0 42rpx 32rpx;
  display: flex;
  align-items: center;
}
.downIcon {
  25rpx;
  height: 12rpx;
  display: inline-block;
  margin-left: 23rpx;
}
.personInfo {
   720rpx;
  margin-left: 30rpx;
  border-bottom: 1rpx solid rgba(238,238,238,1);
  margin-top: 20rpx;
  height: 100rpx;
}
.namePhoneBox {
   100%;
  padding-left: 2rpx;
  height: 40rpx;
}
.personName {
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
}
.personPhone {
  font-size:30rpx;
  font-family:Arial;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.personTime {
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(183,183,183,1);
  margin: 15rpx 0 21rpx 2rpx;
}
.moreIcon {
   20rpx;
  height: 20rpx;
  display: inline-block;
  margin-right: 43rpx;
  margin-left: 10rpx;
}
.rightInfo {
  float: right;
}
.bottomBox {
  position: fixed;
  top:529rpx;
  height: 676rpx;
  overflow-anchor:auto;
}
.warnText {
   720rpx;
  margin-left: 30rpx;
  height: 50rpx;
  background:rgba(238,238,238,1); 
  margin-bottom: 37rpx;
  color: #ccc;
  text-align: center;
  font-size: 26rpx;
  line-height: 50rpx;
}

在js文件中写上以下代码：

Page({


  /**
   * 页面的初始数据
   */
  data: {
    total: '',
    count1: '',
    count2: '',
    count3: '',
    showIconBox:true,
    showImgBox:false,
    focus:false,
    date: '',
    infoValue:'',
    showMiddleBox:true,
    showPicker:true,
    currentPage:1, //当前页
    pageSize:10, //页容量
    entranceId:'',
    userOptions: [],
    pageSize: 10,
    isLoadEnd: false, // 数据是否全部加载完
    isBottom: !1, //定义变量为false
    showBottomText:false //是否展示无数据框
  },
  showIptImgBox:function(){
    let that=this
    that.setData({
      showImgBox: true,
      showIconBox: false,
      focus:true
    })
  },
  getNumList: function () {
    let that = this
    let userToken = wx.getStorageSync('AuthorizationToken') //从缓存里面取的token
    wx.request({
      url: '后端接口',
      method: 'post',
      header: {
        'content-type': 'application/json', // 默认值
        'AuthorizationToken': userToken //所需上传的token
      },
      success(res) {
        if (res.data.code == 1) {
          that.setData({
            count3: res.data.data.nv_cashpay, //数据赋值
            count2: res.data.data.pv_no_pass,
            count1: res.data.data.pv_pass,
            total: res.data.data.sum
          })
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          })
        }
      }
    })
  },
  getUserInfoList:function(){
    let that = this
    let userToken = wx.getStorageSync('AuthorizationToken')
    wx.request({
      url: '后端接口',
      method: 'post',
      header: {
        'content-type': 'application/json', // 默认值
        'AuthorizationToken': userToken
      },
      success(res) {
        if (res.data.code == 1) {
          let tempList = res.data.data.records //定义第1页赋值
          if (!tempList || tempList.length == 0) { //  无数据时
            that.setData({
              showBottomText: true, //展示无数据框
userOptions:[]
            })
          } else { //有数据时
            that.data.isBottom = !1 //定义变量为false
            that.setData({
              showBottomText: false,
              userOptions: that.data.userOptions.concat(...tempList)
            })
          }
          // 数据全部加载完成（停止下拉加载）
          if (that.data.userOptions.length >= res.data.data.total) {
            that.data.isLoadEnd = true;
          } else {
            that.data.isLoadEnd = false;
          }
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          })
        }
      }
    })
  },
  lower:function() {
    let that = this
    // 判断数据是否全部加载完
    if (!that.data.isBottom && !that.data.isLoadEnd) {
      that.data.isBottom = !0 //定义变量为true
      that.data.currentPage += 1
      that.getUserInfoList()
    } else {
      that.setData({
        isLoadEnd: true,
        showBottomText: true
      })
    }
  },
//搜索框获取焦点时
  bindKeyInput: function (e) {
    let that = this
    that.setData({
      infoValue: e.detail.value
    })
  },
//搜索框失去焦点时
  blurInput: function (e) {
    let that = this
    if (e.detail.value.trim() == '') {
      that.setData({
        showImgBox: false,
        showIconBox: true
      })
    }
    that.setData({
      currentPage: 1,
      infoValue: e.detail.value.trim(),

userOptions:[]

    })
    that.getUserInfoList()
  },
//改变时间搜索时
  bindDateChange: function (e) {
    let that = this
    that.setData({
      date: e.detail.value,
      currentPage: 1,

userOptions:[]

    })
    that.getUserInfoList()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that=this
    let myDate = new Date();
    that.setData({
      entranceId: options.entranceId,
      date: myDate.getFullYear() + '-0' + (myDate.getMonth()+1) + '-' + myDate.getDate() //获取当前日期
    })
    that.getNumList()
    that.getUserInfoList()
  },






  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {






  },






  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },






  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {






  },






  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {






  },






  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },






  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },






  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {






  }
})