小程序制作笔记-列表分页并上拉加载-Sham@双目瞿

随着内容的增多，列表页原来越多，为了防止列表页太长，加载数据太多导致卡顿，于是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;
  	}
}

<?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 () {
  }
})

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

// 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>

<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-item >

<scroll-view scroll-y="true" class="scoll-h" >

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

</scroll-view>

</swiper-item>

<swiper-item>

<scroll-view scroll-y="true" class="scoll-h" >

<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="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>

<swiper-item>

<scroll-view scroll-y="true" class="scoll-h" >

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

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

100

101

102

103

104

105

106

107

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,

1	"enablePullDownRefresh": true,

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

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

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

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

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

接着是wxml文件前台显示

然后是wxss

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

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

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

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

接着是wxml文件前台显示

然后是wxss

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

相关推荐

评论 抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

评论抢沙发