Uni-app 订单页 下拉加载更多_YoloAva的博客-程序员秘密

技术标签: uni-app  

订单页面 下拉加载逻辑:
        1.给每个Tab绑定滑动触底事件reachBottom(currentIndex),传入了currentIndex。在函数内判断:为哪个index,并且对应数组比如orderTotal > this.orderList.length,这就说明可以加载更多,就==》pageNum++;并调用查询订单的接口this.__init()。
        2.接口返回200后有个判断:若pageNum=1,将请求到的list直接赋值;若pageNum>1,就用push方法将请求到的list添加到已有的list中:this.orderList.push(...res.data.pageInfo.list)

order.vue

<template>
  <view class="order">
    <u-navbar title="订单" class="header"></u-navbar>
    <view class="tabs">
      <u-tabs ref="uTabs" :list="list" :current="navCurrent" @change="changeNavTab" :is-scroll="false"
        swiperWidth="750"></u-tabs>
    </view>
    <swiper :style="'height:'+clientHeight+ 'px;'" :current="navCurrent" @change="changeSwiper">
      <!-- 全部 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <block v-if="this.orderList.length > 0">
            <OrderList :orderList="orderList"></OrderList>
          </block>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 超时 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.overtimeList.length > 0" :orderList="overtimeList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 完成 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.finishList.length > 0" :orderList="finishList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
      <!-- 关闭 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y :style="'height:'+clientHeight+ 'px;'" @scrolltolower="reachBottom(navCurrent)">
          <OrderList v-if="this.closedList.length > 0" :orderList="closedList"></OrderList>
          <u-empty v-else mode="order"></u-empty>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import OrderList from '@/components/order/orderList.vue'
  import api from '@/service/order.js'
  export default {
    data() {
      return {
        list: [{
          name: '全部'
        }, {
          name: '超时'
        }, {
          name: '完成'
        }, {
          name: '关闭'
        }],
        // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
        navCurrent: 0, // tabs组件的current值,表示当前活动的tab选项
        swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
        clientHeight: 0,
        params: {
          pageSize: 2,
          pageNum: 1,
          entity: {
            orderStatus: null
          }
        },
        orderList: [], // 全部订单
        orderTotal: null, // 全部订单的总数
        finishList: [], // 已完成的订单
        finishTotal: null, // 已完成的订单总数
        overtimeList: [], //超时的订单
        overtimeTotal: null, // 超时的订单总数
        closedList: [], // 关闭的订单
        closedTotal: null, // 关闭的订单总数
      }
    },
    components: {
      OrderList
    },
    onReady() {
      // header
      const query = uni.createSelectorQuery().in(this);
      query.select('.header').boundingClientRect(data => {
        uni.getSystemInfo({
          success: res => {
            // console.log(navHeight) screenHeiht
            this.clientHeight = res.screenHeight - data.height
          }
        })
      }).exec();
      query.select('.tabs').boundingClientRect(data => {
        uni.getSystemInfo({
          success: res => {
            // console.log(navHeight) screenHeiht
            this.clientHeight = this.clientHeight - data.height
          }
        })
      }).exec();
    },
    onLoad() {
      this.__init()
    },
    methods: {
      //初始化,和 tab操作时 调用订单页列表的接口查询
      __init() {
        api.getOrderById(this.params).then(res => {
          if (res.meta.code === '200') {
            if (this.params.pageNum === 1) { //首页滚动到顶部,只请求第一页数据
              switch (this.params.entity.orderStatus) {
                case 'finish': // 已完成
                  this.finishList = res.data.pageInfo.list
                  this.finishTotal = res.data.pageInfo.total
                  break;
                case 'overtime': // 超时
                  this.overtimeList = res.data.pageInfo.list
                  this.overtimeTotal = res.data.pageInfo.total
                  break;
                case 'closed': // 关闭
                  this.closedList = res.data.pageInfo.list
                  this.closedTotal = res.data.pageInfo.total
                  break;
                default: // 全部
                  this.orderList = res.data.pageInfo.list
                  this.orderTotal = res.data.pageInfo.total
                  break;
              }
            } else { //下拉请求多页数据后 此时因为total > list.length 所以pageNum >1
              if (res.data.pageInfo.list.length > 0) {
                switch (this.params.entity.orderStatus) {
                  case 'finish': // 已完成
                    this.finishList.push(...res.data.pageInfo.list)
                    this.finishTotal = res.data.pageInfo.total
                    break;
                  case 'overtime': // 超时
                    this.overtimeList.push(...res.data.pageInfo.list)
                    this.overtimeTotal = res.data.pageInfo.total
                    break;
                  case 'closed': // 关闭
                    this.closedList.push(...res.data.pageInfo.list)
                    this.closedTotal = res.data.pageInfo.total
                    break;
                  default:
                    this.orderList.push(...res.data.pageInfo.list)
                    this.orderTotal = res.data.pageInfo.total
                    break;
                }
              }
            }
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 点击改变导航Tab
      changeNavTab(index) {
        this.navCurrent = index
        this.swipeOrTab(index)
      },
      // 滑动改变swiper
      changeSwiper(e) {
        let index = e.detail.current
        this.navCurrent = e.detail.current
        this.swipeOrTab(index)
      },
      //tab或滑动改变orderStatus,pageNum参数
      swipeOrTab(index){
        switch (index) {
          case 1:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'overtime';
            this.__init();
            break;
          case 2:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'finish';
            this.__init();
            break;
          case 3:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = 'closed';
            this.__init();
            break;
          default:
            this.params.pageNum = 1;
            this.params.entity.orderStatus = null;
            this.__init();
            break;
        }
      },
      //加载到底部
      reachBottom(index) {
        if (index === 0 && this.orderTotal > this.orderList.length ||
          index === 1 && this.overtimeTotal > this.overtimeList.length ||
          index === 2 && this.finishTotal > this.finishList.length ||
          index === 3 && this.closedTotal > this.closedList.length
        ) {
          //说明还可以加载更多
          this.params.pageNum++
          this.__init()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_60463255/article/details/122439957

智能推荐

python 66:re正则表达式9(全- tcy)_tcy23456的博客-程序员秘密

目录:1.re-概述 https://mp.csdn.net/postedit/851568392.re-函数 https://mp.csdn.net/postedit/851569933.re-Pattern   https://mp.csdn.net/postedit/851570414.re-match https://mp.csdn.net/postedit/851570725.re-...

python环境的导入和导出(pip&conda)_导出python环境_Way_X的博客-程序员秘密

pip 导出和导入python环境。Linux下打开终端,激活你要导出的环境,比如conda环境(初始python环境则不用管)source activate &lt;python env name&gt;在该终端下生成requirements.txt文件pip freeze &gt; requirements.txt # requirements.txt文件的保存目录在当前terminal的路径下。安装requirements.txt的python环境conda create -n &.

zabbix卸载及删除_ubuntu卸载zabbix_Portzhu的博客-程序员秘密

如何卸载zabbix且删除1、彻底卸载zabbix和删除残留文件[[email protected] etc]# service zabbix stop //这个命令是停止服务[[email protected] etc]# rpm -qa | grep zabbix // 这个命令就会查看该操作系统上是否已经安装zabbix[[email protected] etc]# yum remove zabbix(根据搜索出的类表依次卸载) //这个命令是卸载zabbix有的话,我们就通过 rpm -e 命令 或

网络参考模型(OSI七层模型、TCP/IP五层和四层模型)_局域网中参考模型都有哪些_幻欢子的博客-程序员秘密

目录一、简介二、相关概念三、名词解释3.1、IP3.2、TCP3.3、UDP3.4、ICMP3.5、通讯端口3.6、数据格式3.7、IPV4与IPV6四、网络参考模型4.1、OSI参考模型4.2、TCP/IP模型4.3、OSI与TCP/IP模型比较【扩展资料】一、简介 互联网协议(Internet Protocol S...

Linux基础——“ shell命令 概述”了解shell和基本linux_shell是命令行吗_Refuel.CONG的博客-程序员秘密

shell 简介英文单词shell直译为“贝壳”。贝壳是动物作为外在保护的一种工具。可以这样认为。Linux中的shell就是Linux内核的一个外层保护工具,并负责完成用户与内核之间的交互。命令是用户向系统内核发出控制请求,与之交互的文本流shell 是一个命令行解释器,讲用户命令解析为操作系统所能理解的指令,实现用户与操作系统的交互。当需要重复执行若干命令,可以将这些命令集合起来,加入一定的控制语句,编辑成shell脚本文件,交给shell批量执行。用户在命令行提示符下键入命令文本,开始

3-VulnHub-Raven 2_尼德霍格007的博客-程序员秘密

VulnHub-Raven: 2靶机地址:https://www.vulnhub.com/entry/raven-2,269/目标:找到四个flag.txt信息作者:尼德霍格007时间:2021-7-8准备工作:kali虚拟机(NAT),raven2虚拟机(NAT)一、信息收集首先要确定目标机IP地址,nmap扫描$ nmap -sP 192.168.21.0/24之后查看开放端口,全端口扫描可以看到目标机开放了22端口(SSH),80端口(HTTP)和两个其他端口(我不知道是干嘛

随便推点

laravel过滤富文本提交的标签(防止XSS等js脚本攻击)_laravel xss_Tuhey的博客-程序员秘密

1.安装sdkcomposer require mews/purifier2.完成后,在配置文件config/app.php的providers中注册HTMLPurifier服务提供者:'providers' =&gt; [ // ... Mews\Purifier\PurifierServiceProvider::class,]然后在aliases中注册Purifier门面:'aliases' =&gt; [ // ... 'Purifier' =&gt; Mews\Puri.

WS2812b幻彩ARGB灯珠的STM32F103的DMA-SPI方式驱动_向未知探索的博客-程序员秘密

最近在做一个STM32项目,需要驱动24位WS2812b RGB灯环。曾写下一篇博文《WS2812b/2811/6812灯珠 – STM32F103 CPU-SPI方式驱动》。原理是:用SPI来模拟WS2812b的驱动信号时序。虽然这个程序能够正常工作,但也有一些缺点,其中一个最明显的缺点是——发送数据要占用大量CPU时间。那么有没有一种更好的办法呢?  这个方法就是用DMA-SPI发送。CPU...

Android 超简单音乐播放器(一)主界面嘛(fragment+ViewPage)(View Pager滑动)( 标题栏的隐藏和状态栏的改变)_ArcheH的博客-程序员秘密

主界面开发是由fragment+ViewPager组成。 分为网络歌曲和本地歌曲。 首先,将main_activity.xml写好。添加Viewpager<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:

算法:位运算_c语言0到1间浮点实数的二进制表示_nuist__NJUPT的博客-程序员秘密

位运算:与 &amp;,或 |,非 ~,异或 ^, 左移 &lt;&lt; , 右移 &gt;&gt; &gt;&gt;&gt; : 运算符用0填充高位 &gt;&gt; : 运算符用符号位填充高位 判断奇数与偶数:x &amp; 1 == 1 , x为奇数 ; x &amp; 1 == 0, x为偶数 题1:找出唯一成对的数 1-1000这1000个数放在含有1001个元素的数组中,只有唯一的一个元素值重复,其它均只出现一次。 每个数组元素只能访问一次,设计一个算法,将它找出来;不用辅助..

服务器硬盘阵列信息恢复,企业服务器RAID配置及硬盘阵列恢复.pdf_夜盏的博客-程序员秘密

企业服务器RAID配置及硬盘阵列恢复���� 检修工程部 设备技 术研 究论文集�酒钢 科技 ���� 年第 � 期�企 业 服 务 器 RAID配 置 及 硬 盘 阵 列 恢 复检修工程部 自动化控制检修作业 区 贾春晖摘 要�本文通过 实 时数据库服务器 系统安装�RAID阵列的配置�故障恢复等的具体实例�分析介绍 了一种较 为适应于 目前计量系 统服 务器 的具体...

成为JavaGC专家Part II — 如何监控Java垃圾回收机制_luoweifu的博客-程序员秘密

本文是成为Java GC专家系列文章的第二篇。在第一篇《深入浅出Java垃圾回收机制》中我们学习了不同GC算法的执行过程,GC是如何工作的,什么是新生代和老年代,你应该了解的JDK7中的5种GC类型,以及这5种类型对于应用性能的影响。在本文中,我将解释JVM到底是如何执行垃圾回收处理的。什么是GC监控?垃圾回收收集监控指的是搞清楚JVM如何执行GC的过程,例如,我们可以查明