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

简介: 【Uniapp小程序】实现上滑加载分页(触底加载)附后端Thinkphp代码

分析说明

后端

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

代码成品

相关文章
|
7月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
694 12
|
7月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
8月前
|
SQL JSON 关系型数据库
17.6K star!后端接口零代码的神器来了,腾讯开源的ORM库太强了!
"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端定制返回 JSON 的数据和结构"
158 1
|
9月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2841 12
|
10月前
通义灵码企业级检索增强-后端注释生成代码场景DEMO
通义灵码企业级检索增强DEMO展示后端注释生成代码场景。通过上传加密算法的标准化写法(英文注释),大模型能够准确推荐企业标准写法,促进内部知识复用,并支持主动干预生成过程,提升代码规范性和一致性。
132 1
|
10月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
452 0
|
12月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
12月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
258 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
人工智能 Java API
后端开发必看:零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造,使其支持 MCP 协议,供 AI Agent 调用。全程无需修改业务代码,仅通过配置完成服务注册、协议转换与工具映射,显著降低改造成本,提升服务的可集成性与智能化能力。
1224 1

热门文章

最新文章