小程序制作笔记-列表分页并上拉加载

随着内容的增多，列表页原来越多，为了防止列表页太长，加载数据太多导致卡顿，于是Sham就查资料，试着给小程序列表页添加分页&上拉加载的功能，新手会遇到坑，但是好在多次尝试后，解决了，分享并记录下。

基本思路是给后台PHP读取的时候添加每页数据量限制，然后小程序读取是传值页码，并通过push把数据添加到当前页数组内，上代码。

首先是给PHP添加分页数据限制：

<?php
include_once("con.php");
$json = '';
$data = array();
$array = array();
//分页读取反馈清单
if(isset($_GET['pageNow'])){
class Ctfblist
{
}
//分页显示
$pageSize = 8;   //每页显示的数量
$rowCount = 0;   //要从数据库中获取
$pageNow = 1;    //当前显示第几页
//如果有pageNow就使用，没有就默认第一页。
if (!empty($_GET['pageNow'])){
  $pageNow = $_GET['pageNow'];
}
$pageCount = 0;  //表示共有多少页
$sql1 = "select count(fmcname) from ctfeedback";
$result1 = $con->query($sql1);
if($result1){
  while ($row1 = mysqli_fetch_array($result1,MYSQL_ASSOC) )
  {
    $rowCount = $row1[0];
  }
}
//计算共有多少页，ceil取进1
$pageCount = ceil(($rowCount/$pageSize));
//使用sql语句时，注意有些变量应取出赋值。
$pre = ($pageNow-1)*$pageSize;
$sql = "SELECT ctfb_month,ctfb_time,fmcname, count(ctfb_details) as fbnumber,sum(ctfb_actodo) as todonumber FROM ctfeedback group by ctfb_month,ctfb_time,fmcname ORDER BY ctfb_time DESC limit $pre,$pageSize";
//通过group by进行月份分组，然后统计ctfb_details字段的行数，因为前面提交表单时设置不能为空，所以用count统计，然后通过sum来求得ctfb_actodo字段的和，该字段如果未处理，则为1，处理了，则变为0
$result = $con->query($sql);
    if($result){
       while ($row = mysqli_fetch_array($result,MYSQL_ASSOC) )
      {
         $ctfblist = new Ctfblist ();
         $ctfblist->ctfb_month= $row["ctfb_month"];
         $ctfblist->ctfb_time= $row["ctfb_time"];
         $ctfblist->fmcname= $row["fmcname"];
         $ctfblist->fbnumber= $row["fbnumber"];
         $ctfblist->todonumber= $row["todonumber"];
	 	 $data[]=$ctfblist;
      }
  
      $json = json_encode($data);//把数据转换为JSON数据.
      echo "{".'"ctfblist"'.":".$json."}";
   }else{
    	echo "查询失败", $con ->error;
  	}
}

然后是通过小程序读取，首先是小程序js文件：

// pages/committeefb/committeefb.js
const app = getApp()
//分页加载
var p = 1  //页数从0开始
var GetList = function (that, icontitle) {
  wx.showToast({
    title: icontitle,
    icon: "loading",
    duration: 10000
  });
  that.setData({
    title: '正在加载更多数据',
  });
  wx.request({
    url: "https://你的网址/fbdetails.php?pageNow=" + p,
    method: "GET",
    data: {
      page: p
    },
    header: {
      'content-type': 'application/json'
    },
    success: function (res) {
      wx.hideToast();
      if (res.data.ctfblist.length > 0) {
        var l = that.data.ctfblist
        for (var i = 0; i < res.data.ctfblist.length; i++) {
          l.push(res.data.ctfblist[i])
        }
        console.log(res.data.ctfblist);
        that.setData({
          ctfblist: l,
          title: '还有更多信息，点我或上拉加载',
        });
        p = p + 1;//10是每页多少条数据
        console.log(p);
        //  console.log(res.data.ctfblist.length);
      } else {
        wx.showToast({
          title: '页面加载结束',
          icon: "loading",
          duration: 1000
        })
        that.setData({
          title: '没有更多数据了',
        });
      }
    },
  });
};
Page({
  /**
   * 页面的初始数据
   */
  data: {
    winHeight: "",//窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //tab标题的滚动条位置
    currentTab: 0,// tab切换
    title: "加载中...",
    /** 分页配置 */
    page: 0,
    ctfblist: [],
  },

  //选项卡获取当前滑块的index
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });
  },
  //选项卡点击切换，滑块index赋值
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {
    var that = this;
    //读取评估
    GetList(that, '正在加载数据...');
  },

  //下拉刷新
  onPullDownRefresh: function () {
    p = 1;
    console.log("回走")
    this.setData({
      ctfblist: [],
    });
    var that = this
    GetList(that, "正在刷新数据")
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1000);
  },
  /**点击加载更多，多一个加载功能*/
  showmore: function () {
    console.log("加载")
    var that = this
    GetList(that, '加载更多数据')
    console.log(p)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

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

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

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {   //这段一定要加，不然等到上拉加载完成至无更多数据后，跳转到其他页面后，再访问这个页面的时候会不加载数据
    p = 1;
    console.log("回走")
    this.setData({
      ctfblist: [],
    });
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉")
    var that = this
    GetList(that, '加载更多数据')
    console.log(p)
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

接着是wxml文件前台显示

<!--反馈列表-->
<view class="myfblist">
  <!--选项卡开始-->
  <view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">我的反馈</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">待处理反馈</view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">已处理反馈</view>
  </view>
 
  <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}rpx" bindchange="bindChange">
  <!--选项卡1-->
    <swiper-item >
    <!--scroll-view 让页面高度自适应，增加滚动条-->
      <scroll-view scroll-y="true" class="scoll-h" >
      <!--我的反馈-->
		<view class="fklist">
			<view wx:for="{{ctfblist}}" wx:key="{{item.ctfb_time}}" date-id="{{item.ctfb_time}}" class="fblist" id="{{item.ctfb_time}}" wx:if="{{item.fmcname==fmcname}}" bindtap="showfbdetails" hover-class="fbonhover" >  
			  <view class="fbdate">日期：{{item.ctfb_time}}</view>
			  <view class="bywho">by\t{{item.fmcname}}</view>
			  <view class="issue"><text class="blue" wx:if="{{item.todonumber==0}}">反馈{{item.fbnumber}}条</text><text class="red" wx:if="{{item.todonumber>0}}">{{item.todonumber}}条未处理</text></view>
			</view>
		</view>
  <!--我的反馈结束-->
      </scroll-view>
    </swiper-item>


  <!--选项卡2-->
    <swiper-item>
    <scroll-view scroll-y="true" class="scoll-h" >
      <view class='swiper_con'>
        <!--未处理反馈-->
		<view class="fklist">
			<view wx:for="{{ctfblist}}" wx:key="{{item.ctfb_time}}" date-id="{{item.ctfb_time}}" class="fblist" id="{{item.ctfb_time}}" wx:if="{{item.todonumber>0}}" bindtap="showfbdetails" hover-class="fbonhover" >  
			  <view class="fbdate">日期：{{item.ctfb_time}}</view>
			  <view class="bywho">by\t{{item.fmcname}}</view>
			  <view class="issue"><text class="blue" wx:if="{{item.todonumber==0}}">反馈{{item.fbnumber}}条</text><text class="red" wx:if="{{item.todonumber>0}}">{{item.todonumber}}条未处理</text></view>
			</view>
		</view>
      <!--未处理反馈结束-->
      </view>
      </scroll-view>
    </swiper-item>
  <!--选项卡3-->
    <swiper-item>
    <scroll-view scroll-y="true" class="scoll-h" >
    <view class='swiper_con'>
        <!--所有反馈-->
		<view class="fklist">
			<view wx:for="{{ctfblist}}" wx:key="{{item.ctfb_time}}" wx:if="{{item.todonumber==0}}" date-id="{{item.ctfb_time}}" class="fblist" id="{{item.ctfb_time}}" bindtap="showfbdetails" hover-class="fbonhover" >  
			  <view class="fbdate">日期：{{item.ctfb_time}}</view>
			  <view class="bywho">by\t{{item.fmcname}}</view>
			  <view class="issue"><text class="blue" wx:if="{{item.todonumber==0}}">反馈{{item.fbnumber}}条</text><text class="red" wx:if="{{item.todonumber>0}}">{{item.todonumber}}条未处理</text></view>
			</view>
		</view>
      <!--所有反馈结束-->
    </view>
      </scroll-view>
    </swiper-item>  
  </swiper>
<!--选项卡结束-->
  <view class="loadmore" bindtap="showmore">{{title}}</view>
</view>

然后是wxss

page{
  background-color: #f0f0f0;
  width: 100%;
  height:100%;
  padding-top:10px;
}
  /**选项卡**/
.swiper-tab{
	width: 100%;
	border-bottom: 5rpx solid #50aaff;
	text-align: center;
  }
.swiper-tab-list{  
  font-size: 40rpx;
  display: inline-block;
	width: 33.33%;
	color: #777777;
  margin-bottom:0rpx;
}

.on{ 
  color: #50aaff;
  font-weight:bold;
	border-bottom: 5rpx solid #50aaff;
  }
 
.swiper-box{ 
  width: 100%;
  display: flex; 
  flex-grow: row no-wrap;
  justify-content: space-between; 
  padding: 10rpx 20rpx;
  box-sizing: border-box; 
  align-items: center;
  margin:5px 0 5px;
  }
.scoll-h{
  height: 100%;
  }
  /**反馈清单*/
.myfblist{
  display:flex;
  flex-direction: column;
  margin:10px auto 0px;
  padding-top:10px;
  width:90%;
  height:auto;
  background: #fff;
  border-radius:5px;
  }
.fklist{  
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  margin:0px auto 10px;
  padding:5px 0px;
  background-color: #fff;
}

.fblist{
  display:flex;
  flex-direction: row;
  margin:auto;
  padding:10px 0px 5px;
  width:95%;
  color:#5a5a5a;
  border-bottom: 2rpx dashed #50aaff;
}
.issue{
  width:70px;
  text-align:center;
  font-size:12px;
}
.fbdate{
  width:200px;
  margin-left:-12px;
  margin-right:5px;
  text-align:left;
  font-size:12px;
}
.bywho{
  width:85px;
  margin-right:5px;
  text-align:center;
  font-size:11px;
}
.red{
  color:red;
}
.blue{
  color:#50aaff;
}
 .fbonhover{
  background: #50aaff;
  color:#fff;
}
.loadmore{
  margin:0px auto 10px;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  font-size:18px;
  color:#777777;
}

另外，如果需要让下拉刷新生效，还需要再json文件中添加

"enablePullDownRefresh": true,

大功告成， 作为一个伸手党，深知伸手党需要什么 ，所以全套代码奉上。

如果觉得不错，就给个评论好评或者赏杯速溶咖啡呗！