小程序局部分页上拉加载

首先看页面效果

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

在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;
  width: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 {
  width: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 {
  width: 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 {
  width: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 {
  width: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 {
  width: 100%;
  font-size:28rpx;
}
.picker {
  text-align: left;
  margin: 56rpx 0 42rpx 32rpx;
  display: flex;
  align-items: center;
}
.downIcon {
  width:25rpx;
  height: 12rpx;
  display: inline-block;
  margin-left: 23rpx;
}
.personInfo {
  width: 720rpx;
  margin-left: 30rpx;
  border-bottom: 1rpx solid rgba(238,238,238,1);
  margin-top: 20rpx;
  height: 100rpx;
}
.namePhoneBox {
  width: 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 {
  width: 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 {
  width: 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 () {

}

})