小程序怎么做查看更多的显示和隐藏

举报
原来是咔咔 发表于 2022/03/27 02:45:36 2022/03/27
【摘要】   应用场景:    当列表数据太多时,就会进行分段查询,这就有了查看更多   小编在刚刚开始做的时候也是费了很大的劲,想了三种方案,这就不细说了,来说下最简单的方案   PHP代码:     .....其实PHP是不需要处理什么东西的,只需要将数据的总条...

 

应用场景:

   当列表数据太多时,就会进行分段查询,这就有了查看更多

  小编在刚刚开始做的时候也是费了很大的劲,想了三种方案,这就不细说了,来说下最简单的方案

 

PHP代码:

    .....其实PHP是不需要处理什么东西的,只需要将数据的总条数返回给前端即可


      $count = Db::table('wxb_move_user')->where($where)->count();
      $send = ['data'=>$product,'count'=>$count];
      $this->result($send, 200, '获取信息成功', 'json');
  
 

 

小程序代码:

   在第一次加载的时候只需要判断总数量是否小于等于10,总量小于等于10后边就没有数据了,查看更多按钮隐藏

   同理,点击查看更多的时候,获取拼接后的数据的条数,在与总量进行判断,当总量大于拼接的数量时,表示后边还有数据,查看按钮就需要在显示出来

   此处的陌生知识点就是concat可以拼接数据


      // 获取公司信息
       getCompanyInfo:function(){
          wx.showLoading({
           title: '加载中',
          })
         var that = this;
         var page = this.data.page;
          wxb.Post('/api/automatic.Allinfo/getInfo',{
           page: page
          },function(data){
            wx.hideLoading();
           var count = data.count;
           if(count <= 10){
              that.setData({
               companyList: data.data,
               display: 0
              })
            }else{
              that.setData({
               companyList: data.data,
               display: 1
              })
            }
          });
        },
       more:function(){
         var that = this;
         var companyList = this.data.companyList;
         var page = this.data.page;
          wxb.Post('/api/automatic.Allinfo/getInfo', {
           page: page+1
          }, function (data) {
            wx.hideLoading();
           var list = companyList.concat(data.data);
           var count = data.count;
           if (count > list) {
              that.setData({
               companyList: list,
               display: 1
              })
            } else {
              that.setData({
               companyList: list,
               display: 0
              })
            }
          });
        },
  
 

   

 

 

文章来源: blog.csdn.net,作者:咔咔-,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/fangkang7/article/details/82857536

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。