首先需要在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;
}
}
好了,数据表就简单了~~
类似这种效果...