1.前端的数据动态渲染
<view class="box">
<block wx:for="{{list}}">
<navigator url="/pages/xiang/xiang">
<view class="box2">
<view>
<image src="/img/iphone.png" style="width: 30%; height: 80px; float: left;"></image>
</view>
<view style="float: right;">
<view>{{item.id}}</view>
<view>{{item.name}}</view>
<view style="color: red;">{{item.price}}$</view>
<view>{{item.text}}</view>
</view>
</view>
</navigator>
</block>
</view>
2.js页面
/**
* 页面的初始数据
*/
data: {
//循环数据
list: [],
//页码
page: '1',
//总页数
pages: '',
//每页显示数量
size: 5
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this
wx.request({
// 请求地址
url: 'http://www.xiao.com/index.php/list',
//传页码和每页显示的数量
data: {
page: this.data.page,
size: this.data.size
},
success: function (res) {
//返回数据后赋值、循环
var arr = res.data.data;
arr.forEach(function (v, k) {
//将每一个值追加到list数组中
_this.data.list.push(v)
});
//替换掉list,page,pages(后边两个值均为返回的值)
_this.setData({
list: _this.data.list,
page: res.data.page,
pages: res.data.pages
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//页面加载中给出提示
wx.showToast({
title: '正在加载中....',
icon: "loading"
})
var _this = this;
//如果页码大于等于总页数,则做出提示
if (this.data.page >= this.data.pages) {
wx.showToast({
title: '到底了',
icon: 'error'
})
}
wx.request({
// 请求地址
url: 'http://www.xiao.com/index.php/list',
//传页码和每页显示的数量
data: {
page: this.data.page,
size: this.data.size
},
success: function (res) {
//返回数据后赋值、循环
var arr = res.data.data;
arr.forEach(function (v, k) {
//将每一个值追加到list数组中
_this.data.list.push(v)
});
//替换掉list,page(page值为返回的值)
_this.setData({
list: _this.data.list,
page: res.data.page
})
}
})
},
3.在后端查询出数据并渲染到前台
//此方法为第一次加载调用的方法
public function lsst()
{
//接值
$page = Request::instance()->param('page');
$size = Request::instance()->param('size');
//new模型查询出数据后计算总页数
$model = new BuyModel();
$data = $model->select();
$data = collection($data)->toArray();
$pages = count($data);
//向上取整计算出总页数
$pages = ceil($pages / $size);
//再次查询利用limit进行分段查询
$data = $model->limit(($page - 1) * $size, $size)->select();
//转化为数组
$data = collection($data)->toArray();
//返回页码,数据,总页数
return json(['code' => 200, 'page' => $page + 1, 'data' => $data, 'pages' => $pages, 'msg' => '查询成功']);
}
//此方法为上拉时调用的方法
public function listX()
{
//接值
$page = Request::instance()->param('page');
$size = Request::instance()->param('size');
//new模型查询出数据
$model = new \app\test\model\Lists();
//利用limit进行分段查询
$data = $model->limit(($page - 1) * $size, $size)->select();
//转化为数组
$data = collection($data)->toArray();
//返回页码,数据(每次返回页码都+1)
return json(['code' => 200, 'page' => $page + 1, 'data' => $data, 'msg' => '查询成功']);
}