I'm Sham
一个在通往码农道路上走走停停的行政文员
当前位置：Sham@双目瞿 > 学习笔记 > 代码学习 > 正文

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

2019-05-17 分类：代码学习 / 程序代码 阅读(3160) 评论(0)

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

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

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

赞(1) 赏杯咖啡！
未经允许不得转载：Sham@双目瞿 » 小程序制作笔记-列表分页并上拉加载
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

最新评论

置顶推荐

热门标签

PHP (34)小程序 (33)sham (10)js (7)ubuntu (6)表单 (4)阿里云 (4)Mysql (4)layui (4)上传 (4)数组 (4)放假 (3)holiday (3)ffmpeg (3)行政 (3)excel (3)微信 (3)wordpress (3)nginx (2)图片 (2)判断 (2)if (2)网盘 (2)二维码 (2)模板消息 (2)OCR (2)后勤 (2)电信 (2)活动 (2)谷歌 (2)

网站统计

  • 日志总数：115
  • 评论总数：331
  • 页面总数：0
  • 最后更新：2022-05-23

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

微信扫一扫打赏