【Uniapp小程序】实现上滑加载分页（触底加载）附后端Thinkphp代码

野性酷女 2023-09-24 17:30 14阅读 0赞

## 分析说明 ##

### 后端 ###

>     $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>

## 代码成品 ##

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 学习笔记十四 LeanCloud约束查询及触底分页下拉自动加载实现

uniapp 学习笔记十四 LeanCloud约束查询及触底分页实现下拉自动加载数据 ![d98777f2ccdf43e89e71b0b3cc842203.png][]

墨蓝/ 2024年04月08日 13:29/ 0 赞/ 32 阅读

相关微信小程序开发使用onreachBottom实现页面触底加载及分页

一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样，都属于小程序的生命周期事件，作用就是在页面下拉到底部时触发这

心已赠人/ 2023年10月10日 18:40/ 0 赞/ 35 阅读

相关【Uniapp小程序】实现上滑加载分页（触底加载）附后端Thinkphp代码

分析说明后端 > $query_total=DB::table('book')->where(["class_id"=>$class_id])->pagi

野性酷女/ 2023年09月24日 17:30/ 0 赞/ 15 阅读

相关【微信小程序】实现分页加载

一、效果 ![format_png][] 已加载全部.png 二、步骤 1. wxml中 <view class="loading" hidde

墨蓝/ 2023年03月06日 05:45/ 0 赞/ 80 阅读

相关 uni-app 发送请求，分页请求，触底加载

1. 发送请求，保存数据 uni.request({ url: '接口?pageNo='+this.pageNo, metho

桃扇骨/ 2022年12月25日 13:52/ 0 赞/ 69 阅读

相关 h5页面触底加载--div触底加载

页面触底加载 page = 1 //当前页 pages = 0 //总页数 $(window).scroll(function(){

谁践踏了优雅/ 2022年11月29日 12:56/ 0 赞/ 186 阅读

相关 JS案例：触底懒加载

接着上篇文章：[ajax获取图片列表][ajax]，我们来实现一下JS的经典案例，懒加载在web应用中，系统的响应速度对用户体验十分重要，其最主要的影响来源于服务端数据库查

刺骨的言语ヽ痛彻心扉/ 2022年11月05日 01:57/ 0 赞/ 220 阅读

相关 listView实现分页加载

实现简单的listview分页加载，效果如下图所示： ![这里写图片描述][20160306020113348] ListView显示预加载的10个Item，往上拉动每

本是古典何须时尚/ 2022年08月21日 00:04/ 0 赞/ 187 阅读

相关小程序下拉刷新上拉触底加载数据

1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「o

忘是亡心i/ 2021年12月19日 14:25/ 0 赞/ 342 阅读

相关 uniapp 上拉加载

1、与data同级监听上拉 onReachBottom() { ... } 2、设置触发监听事件

梦里梦外;/ 2021年07月24日 23:43/ 0 赞/ 494 阅读