小程序列表里PHP,微信小程序生成列表页带分页功能 Thinkphp后台调用数据库

首先需要在app.json的window选项中或页面配置中开启enablePullDownRefresh

"enablePullDownRefresh": true

wxml页面：

{{title}}

{{item.goods_name}}

品牌：{{item.brand_name}}

价格：{{item.goods_price}}(库存：{{item.goods_number}})

{{item.goods_create_time}}

js页面：

//index.js

//获取应用实例

const app = getApp()

var p = 0 //页数从0开始

var GetList = function (that, icontitle ) {

wx.showToast({

title: icontitle,

icon: "loading",

duration: 10000

});

wx.request({

url: "https://cs.xxxxxx.com/shop/index.php/Goods/json/",

method: "POST",

data: {

page: p

},

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

wx.hideToast();

// console.log(p);

//console.log(res.data);

// console.log(res.data.info);

if (res.data.info.length > 0) {

var l = that.data.list

for (var i = 0; i < res.data.info.length; i++) {

l.push(res.data.info[i])

}

that.setData({

list: l,

title: res.data.title,

});

p = p + 10;//10是每页多少条数据

// console.log(p);

// console.log(res.data.info.length);

} else {

wx.showToast({

title: '页面加载结束',

icon: "loading",

duration: 1000

})

}

},

});

};

Page({

data: {

title: "加载中...",

imgurl:"https://cs.xxxxxx.com/shop/",

/** 分页配置 */

page: 0,

list: [],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this

GetList(that,'正在加载数据...');

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

p = 0;

console.log("回走")

this.setData({

list: [],

});

var that = this

GetList(that,"正在刷新数据")

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function (res) {

console.log("上拉")

var that = this

GetList(that,'加载更多数据')

console.log(p)

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

wxss页面(随便写的可以忽略)：

/**app.wxss**/

page{

font-family: "Microsoft YaHei";

background-color: #fff;

display:flex;

/*纵向排列*/

flex-direction: column;

}

.page-header{

display: flex;

/*横向居中对齐*/

justify-content: center;

border-bottom:2rpx solid #ccc;

margin-bottom: 10rpx;

}

.page-header-text{

padding:20rpx 40rpx;

color:#999;

font-size: 40rpx;

text-align:center;

}

.page-body{

display: flex;

flex:1;

flex-direction: column;

}

.item{

display:flex;

padding:20rpx 40rpx;

border-bottom:2rpx solid #eee;

}

.item .poster{

width:128rpx;

height:128rpx;

margin-right:20rpx;

}

.item .meta{

flex:1;

}

.item .title,.item .sub-title,.item .sub-jb{

display:block;

}

.item .title{

font-size: 32rpx;

}

.item .sub-title{

font-size:28rpx;

font-weight:bold;

}

.item .sub-jg{

font-size:28rpx;

font-weight:bold;

color:red;

}

.item .rating {

font-size:22rpx;

color:#c0c0c0;

display:block;

}

.item .artists{

font-size:26rpx;

color:#999;

}

Thinkphp后台(3.2.3)：

public function json(){

S(array('prefix'=>'json'));

if(!S('shuju')){

//echo 1;exit;

$goods = D('Goods');

/** 小程序搜索功能用到的 start **/

$title=trim(I('q'));//

//dump(I('get.q'));

if(!empty($title)){

$where['goods_name']=array('like','%'.$title.'%');

$where['goods_introduce']=array('like','%'.$title.'%');

$where['_logic'] = 'or';

$data['_complex'] = $where;

}

/** end **/

$count = $goods->where($data)->count();

$Page = new \Think\Page($count,10);// 实例化分页类 传入总记录数和每页显示的记录数(10)

$brand = D('Brand');

$info=$goods->where($data)->join('LEFT JOIN __BRAND__ ON __GOODS__.goods_brand_id=__BRAND__.brand_id')->order('goods_id desc')->limit(I('page').','.$Page->listRows)->select();

$data['title']=iconv('gb2312','utf-8','我 love 商品');//Json 只支持 utf-8 编码 (iconv — 字符串按要求的字符编码来转换)

$data['info']=$info;

//dump($info);exit;

S('shuju',$data,300);//300秒 5分

dump($this->ajaxReturn($data));

exit;

}else{

dump($this->ajaxReturn(S('shuju')));

exit;

}

}

好了，数据表就简单了~~

类似这种效果...