技术标签: 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>
目录: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-...
pip 导出和导入python环境。Linux下打开终端,激活你要导出的环境,比如conda环境(初始python环境则不用管)source activate <python env name>在该终端下生成requirements.txt文件pip freeze > requirements.txt # requirements.txt文件的保存目录在当前terminal的路径下。安装requirements.txt的python环境conda create -n &.
如何卸载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 命令 或
目录一、简介二、相关概念三、名词解释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...
shell 简介英文单词shell直译为“贝壳”。贝壳是动物作为外在保护的一种工具。可以这样认为。Linux中的shell就是Linux内核的一个外层保护工具,并负责完成用户与内核之间的交互。命令是用户向系统内核发出控制请求,与之交互的文本流shell 是一个命令行解释器,讲用户命令解析为操作系统所能理解的指令,实现用户与操作系统的交互。当需要重复执行若干命令,可以将这些命令集合起来,加入一定的控制语句,编辑成shell脚本文件,交给shell批量执行。用户在命令行提示符下键入命令文本,开始
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)和两个其他端口(我不知道是干嘛
1.安装sdkcomposer require mews/purifier2.完成后,在配置文件config/app.php的providers中注册HTMLPurifier服务提供者:'providers' => [ // ... Mews\Purifier\PurifierServiceProvider::class,]然后在aliases中注册Purifier门面:'aliases' => [ // ... 'Purifier' => Mews\Puri.
最近在做一个STM32项目,需要驱动24位WS2812b RGB灯环。曾写下一篇博文《WS2812b/2811/6812灯珠 – STM32F103 CPU-SPI方式驱动》。原理是:用SPI来模拟WS2812b的驱动信号时序。虽然这个程序能够正常工作,但也有一些缺点,其中一个最明显的缺点是——发送数据要占用大量CPU时间。那么有没有一种更好的办法呢? 这个方法就是用DMA-SPI发送。CPU...
主界面开发是由fragment+ViewPager组成。 分为网络歌曲和本地歌曲。 首先,将main_activity.xml写好。添加Viewpager<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:
位运算:与 &,或 |,非 ~,异或 ^, 左移 << , 右移 >> >>> : 运算符用0填充高位 >> : 运算符用符号位填充高位 判断奇数与偶数:x & 1 == 1 , x为奇数 ; x & 1 == 0, x为偶数 题1:找出唯一成对的数 1-1000这1000个数放在含有1001个元素的数组中,只有唯一的一个元素值重复,其它均只出现一次。 每个数组元素只能访问一次,设计一个算法,将它找出来;不用辅助..
企业服务器RAID配置及硬盘阵列恢复���� 检修工程部 设备技 术研 究论文集�酒钢 科技 ���� 年第 � 期�企 业 服 务 器 RAID配 置 及 硬 盘 阵 列 恢 复检修工程部 自动化控制检修作业 区 贾春晖摘 要�本文通过 实 时数据库服务器 系统安装�RAID阵列的配置�故障恢复等的具体实例�分析介绍 了一种较 为适应于 目前计量系 统服 务器 的具体...
本文是成为Java GC专家系列文章的第二篇。在第一篇《深入浅出Java垃圾回收机制》中我们学习了不同GC算法的执行过程,GC是如何工作的,什么是新生代和老年代,你应该了解的JDK7中的5种GC类型,以及这5种类型对于应用性能的影响。在本文中,我将解释JVM到底是如何执行垃圾回收处理的。什么是GC监控?垃圾回收收集监控指的是搞清楚JVM如何执行GC的过程,例如,我们可以查明