分析说明
后端
$query_total=DB::table('book')->where(["class_id"=>$class_id])->paginate($per_page); 查询符合条件的总记录总数 $class=DB::table('book')->where(["class_id"=>$class_id])->limit($page,$per_page)->select(); 查询limit限制后的数据 注意:thinkphp中 limit(a,b)表示从第a行的b条数据
//依据分类查询图书 public function query_book_by_classid(){ $token=input('token'); $class_id=input('class_id'); $page=input('page');//起始行 $per_page=input('per_page');//每页数据 $redis = new Redis(); $result= $redis->get($token); if ($result) { // limit(a,b)从第a行的b条数据 $query_total=DB::table('book')->where(["class_id"=>$class_id])->paginate($per_page); $class=DB::table('book')->where(["class_id"=>$class_id])->limit($page,$per_page)->select(); $coun=ceil($query_total->total()/$per_page); die( json_encode( array( 'code' => 200, 'total' => $coun, 'data' => $class, 'msg' => '获取成功' ),480) ); } else { die( json_encode( array( 'code' => 100, 'data'=>'', 'msg' => 'token失效或不存在!请重新获取' ),480) ); } }
小程序端
实现触底加载我们需要用到onReachBottom方法
onReachBottom() { console.log("我被触发了"); },
<script> export default { data() { return { // 商品数据 goodsList:[], loadText:"", loadSwitch:false, // 分页信息 total:"",//总页数 page:0,//起始页 per_page:6,//每页显示 } }, onReachBottom() { // 如果当前页数大于等于总页数,状态修改为没有更多了,不再继续往下执行代码 uni.showLoading({ title:'加载中..' }) if(this.loadSwitch){ this.loadSwitch = false; this.page = this.page+this.per_page;//页面新增一页 setTimeout(() => { this.getGoodsList(this.tabs2[0]['id']); }, 1200); }else{ uni.hideLoading() } }, onLoad() { this.get_book_class(); setTimeout(() => { this.getGoodsList(this.tabs2[0]['id']); console.log(this.tabs2[0]['id']) }, 1100); }, methods: { getGoodsList(ee){ console.log("默认得到的分类id"+ee) this.loadText = "加载中"; uni.request({ url: 'https://xxxxx/index.php/index/Api/query_book_by_classid', //仅为示例,并非真实接口地址。 data: { token:uni.getStorageSync('token'), class_id:ee, page:this.page, per_page:this.per_page }, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息 }, success: (res) => { this.goodsList = this.goodsList.concat(res.data.data); var total=res.data.total; if(this.page >= total) { this.loadSwitch = false; this.loadText = "没有啦~"; uni.hideLoading() }else{ setTimeout(()=>{ this.loadText = "上拉加载更多"; this.loadSwitch = true; uni.hideLoading() },200); } } }) }, get_book_class(){ let url = 'https://xxxxx/index.php/index/Api/query_class'; uni.request({ url, data: { token:uni.getStorageSync('token') }, method:'GET', success: (res) => { console.log(res.data) if (res.data.code==200) { console.log(res.data.data.length) for(let i = 0;i<res.data.data.length;i++){ this.tabs2.push(res.data.data[i]); } } else{ uni.showToast({ title:res.data.msg, icon:'none' }) } } }) }, onTabs2Change(index){ // 设置激活 console.log(index) this.tabs2Current = index; // 设置滚动位置 let into = 0; if(this.tabs2.length - 2 < index){ into = this.tabs2.length - 1; }else if(index > 1){ into = index - 2; } this.tabs2IntoView = `tabs-${into}` } } } </script>