微信小程序触底加载分页
**
微信小程序触底加载分页
**
1、scroll-view组件触底加载分页案例：
微信小程序前台：
JS:
Page({
data: {
shaidanpages:1,//晒单开始页数
allPagesshaidan: '',//晒单总页数
shaidans:[],
},
onLoad: function (options) {
var pages=that.data.shaidanpages;
that.shaidan(pages);
},
//精选晒单
shaidan:function(e){
var pages=e;
var that=this;
var uid = wx.getStorageSync('uid');
//晒单列表
wx.request({
url: 'https://www.dongjiaju.net/index.php?s=/api/discover/shaidan',
method: 'POST',
data: {
uid:uid,
pages:pages,
limit:that.data.limit,
},
//参数为键值对字符串
header: {
//设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
var arr =that.data.shaidans;
res.data.list.forEach(function (value) {
arr.push(value)
})
if (res.data.list.length != 0) {
that.setData({
shaidans:arr,
allPagesshaidan:res.data.pagecount,
shaidanpages:res.data.page,
})
}
}
});
},
//晒单触底刷新
bindshaidan:function(){
var pages=this.data.shaidanpages;
var allPagesshaidan=this.data.allPagesshaidan;
if(allPagesshaidan>pages)
{
var page= ++pages;
this.shaidan(page);
}
else
{
wx.showToast({
title: '没有更多了！',
icon: 'success',
duration: 2000
})
}
},
})
WXML:
{
{item.description}}
{
{item.nickname}}
{
{item.diqu}}
php api代码：
//晒单
public function shaidan($page=1,$limit=20,$start=0,$field='*',$addition=1,$totalshow=1){
$urls=$_SERVER['HTTP_HOST'];
$uid=$_POST['uid'];
$page=$_POST['pages'];
$https="https";
$param=input();
$param['page'] = intval($param['page']) <1 ? 1 : $param['page'];
$param['limit'] = intval($param['limit']) <1 ? $this->_pagesize : $param['limit'];
$limit_str = ($limit * ($page-1) + $start) .",".$limit;
if($totalshow==1) {
$total =Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->count();
}
$result=Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->limit($limit_str)->select();
// $result1=Db::name('nc_shaidan')->where('shenhe',1)->order('id desc')->where('header_img','like','https%')->limit(0,12)->select();
foreach($result as $kk=>$vv){
$result[$kk]['cover']="https://$urls/".$vv['cover'];
$result[$kk]['description']=mb_substr($vv['description'],0,25,'utf-8').'...';
if(strpos($vv['header_img'],$https) !== false){
$result[$kk]['header_img']=$vv['header_img'];
}
else{
$result[$kk]['header_img']="https://$urls/".$vv['header_img'];
}
}
$result=array('code'=>1,'msg'=>'数据列表','page'=>$page,'pagecount'=>ceil($total/$limit),'limit'=>$limit,'total'=>$total,'list'=>$result);
echo json_encode($result);
exit();
}
2、使用onReachBottom来触底加载分页
如果是一个页面含有多个情况，在data里面定义一个变量来判断是哪种情况如type:””,点击哪个情况就给它赋不同的值，然后给每个情况独立的page分页变量在data,如果需要判断当前页数是否大于总页数，也要给每个情况独立的总页数pagecount！
过程：在onReachBottom的方法里面使用type来判断执行的是哪个情况，每次执行页数要加一再执行，然后调用数据请求的方法，属于哪种情况就调用哪个；
案例如下：
JS
Page({
data: {
typess:"",
pagefg:0,
pagekj:0,
pagepl:0,
pagepx:0,
allpagepl:0,
showpl:true,
srcfg:"",
select_fengge:"",//选中风格
kongjianpinlei:"",//选中空间或者品类
},
/*** 页面上拉触底事件的处理函数*/
onReachBottom: function () {
var uid = wx.getStorageSync('uid');
var typess=this.data.typess;
var that=this;
if(typess=="")
{
var page = this.data.page;
var page=page+1
this.setData({
page:page
})
var category_id3 = this.data.category_id3;
var catnames=this.data.catnames;
var kj=this.data.kj;
var list = this.data.list;
console.log(list);
console.log(catnames);
console.log(kj);
console.log(category_id3);
wx.request({
url: 'https://www.dongjiaju.net/index.php?s=/api/index/xiala',
method: 'POST',
data:{'category_id':category_id3,'pages':page,'uid':uid,'list':list,'catnames':catnames,'kj':kj},
header: {
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
if(res.data!=""){
for (var i = 0; i < res.data.length; i++) {
that.data.goodslist.push(res.data[i]);
}
}
that.setData({
goodslist:that.data.goodslist,
category_id3:category_id3,
})
}
})
}
else if(typess==1){
var pagefg=that.data.pagefg;
pagefg=++pagefg;
that.setData({
pagepx:0,
pagefg:pagefg,
pagekj:0,
pagepl:0,
})
that.fengge();
}
else if(typess==2){
var pagekj=that.data.pagekj;
pagekj=++pagekj;
that.setData({
pagepx:0,
pagefg:0,
pagekj:pagekj,
pagepl:0,
})
that.kongjiass();
}
else if(typess==3){
var pagepl=that.data.pagepl;
pagepl=++pagepl;
that.setData({
pagepx:0,
pagefg:0,
pagekj:0,
pagepl:pagepl,
})
that.tijiao();
}
else if(typess==4){
var pagepx=that.data.pagepx;
pagepx=++pagepx;
that.setData({
pagepx:pagepx,
pagefg:0,
pagekj:0,
pagepl:0,
})
that.filter();
}
},
//风格排序
fengge:function(e){
var token = wx.getStorageSync('token');
var uid = wx.getStorageSync('uid');
var page=this.data.pagefg;
if(e==undefined)
{
var id = wx.getStorageSync('productallflid');
}
else {
var id = e.currentTarget.dataset.id;
wx.setStorageSync('productallflid',id);
page=0;
this.setData({
pagefg:0,
})
}
var that=this;
wx.request({
url: 'https://www.dongjiaju.net/index.php?s=/api/index/fenggegoods',
method: 'POST',
//参数为键值对字符串
data:{'pages':page,'uid':uid,'id':id},
header: {
//设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
if(page>=1)
{
if(res.data!=""){
for (var i = 0; i < res.data.length; i++) {
that.data.goodslist.push(res.data[i]);
}
}
that.setData({
goodslist:that.data.goodslist,
typess:1,
})
}
else{
that.setData({
goodslist:res.data,
typess:1,
})
}
}
})
},
//空间排序
kongjiass:function(e){
var token = wx.getStorageSync('token');
var uid = wx.getStorageSync('uid');
var page=this.data.pagekj;
if(e==undefined)
{
var id = wx.getStorageSync('productallflid');
}
else {
var id = e.currentTarget.dataset.id;
wx.setStorageSync('productallflid',id);
page=0;
this.setData({
pagekj:0,
})
}
var that=this;
wx.request({
url: 'https://www.dongjiaju.net/index.php?s=/api/index/kongjiasort',
method: 'POST',
//参数为键值对字符串
data:{'pages':page,'uid':uid,'id':id,},
header: {
//设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
if(page>=1)
{
if(res.data!=""){
for (var i = 0; i < res.data.length; i++) {
that.data.goodslist.push(res.data[i]);
}
}
that.setData({
goodslist:that.data.goodslist,
typess:2,
})
}
else{
that.setData({
goodslist:res.data,
typess:2,
})
}
}
})
},
})