cube-ui IndexList 切换Tab Y坐标归零
<template>
<div class="fx t12 column">
<div class="order_search_div fl">
<div class="fx bb">
<ul class="ulOrderTab">
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='全部' }]" @click="changeTab">全部</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='未服务' }]" @click="changeTab">未服务</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='服务中' }]" @click="changeTab">服务中</li>
<li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='已服务' }]" @click="changeTab">已服务</li>
<li class="h2">
<div v-if="currentTab=='全部'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='未服务'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='服务中'" class="clsLineTab"></div>
</li>
<li class="h2">
<div v-if="currentTab=='已服务'" class="clsLineTab"></div>
</li>
</ul>
</div>
</div>
<div class="h100">
<cube-index-list ref="indexList" :data="listOrder" :navbar="false" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
<div v-for="(item,index) in listOrder" :key="index">
<template-order ref="tItem" :tItem="item" :tTabType="currentTab"></template-order>
</div>
</cube-index-list>
</div>
</div>
</template>
<script>
const initPageSize = 10;
export default {
name: 'iorder',
data() {
return {
listOrder: [],
pageSize: initPageSize,
pageIndex: 0,
totalOrder: 100,
currentTab: '全部',
options: {
observeDOM: true,
click: true,
probeType: 1,
scrollbar: false, ////导航条
pullDownRefresh: {
threshold: 60,
stop: 40,
stopTime: 400,
txt: '刷新成功'
},
pullUpLoad: {
threshold: 10,
txt: {
more: '加载更多',
noMore: '暂无更多'
},
visible: true,//坐标Y归零
},
},
};
},
methods: {
////下拉刷新
onPullingDown() {
setTimeout(() => {
this.$refs.indexList.forceUpdate(true)
}, 1000)
},
////加载更多
onPullingUp() {
setTimeout(() => {
if (this.listOrder.length < this.totalOrder) {
// 如果有新数据
this.pageIndex = this.listOrder.length;
var zlcount = this.totalOrder - this.listOrder.length > initPageSize ? initPageSize : this.totalOrder - this.listOrder.length;
this.pageSize = this.pageIndex + zlcount;
this.getListOrder();
} else {
// 如果没有新数据
this.$refs.indexList.forceUpdate();
}
}, 500);
},
//关键字查询
searchByKey() {
this.listOrder = [];
this.pageIndex = 0;
this.pageSize = initPageSize;
this.getListOrder();
},
//切换tab
changeTab(cur) {
this.currentTab = cur.target.innerText;
this.searchByKey();
},
//获取数据
getListOrder() {
setTimeout(() => {
for (var a = this.pageIndex; a < this.pageSize; a++) {
let OrderState;
if (this.currentTab == "全部") {
OrderState = a > 2 ? 0 : a;
} else if (this.currentTab == "未服务") {
OrderState = 0;
} else if (this.currentTab == "服务中") {
OrderState = 1;
} else if (this.currentTab == "已服务") {
OrderState = 2;
}
this.listOrder.push({
Id: a,
UserName: "姓名" + a.toString(),
});
}
}, 500);
}
},
created() {
this.getListOrder();
},
mounted() {},
}
</script> <style scoped>
.order_search_div {
width: 100%;
height: auto;
background-color: white;
}
.order_search {
width: 271px;
height: 30px;
padding: 4px 7px;
background: #F6F6F6;
border-radius: 15px;
margin: 10px auto;
}
.order_search input {
height: 22px;
width: 200px;
background: #F6F6F6;
}
.tbxSearch {
width: 271px;
height: 30px;
background: rgba(246, 246, 246, 1);
border-radius: 15px;
}
.ulOrderTab {
width: 100%;
}
.ulOrderTab li {
width: 25%;
float: left;
list-style: none;
line-height: 25px;
text-align: center;
}
.clsNotActiveTab {
color: #999999;
font-size: 14px;
font-weight: 400;
}
.clsActiveTab {
color: #333333;
font-size: 16px;
font-weight: 800;
}
.h2 {
margin-top: 6px;
height: 2px;
text-align: center;
}
.clsLineTab {
margin: 0 auto;
width: 20px;
border: 2px solid #36CFC9;
}
</style>
cube-ui IndexList 切换Tab Y坐标归零的更多相关文章
- 关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题
在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...
- echars 实现多曲线,多Y轴,曲线单选切换,并且跟随切换指定Y轴
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离。显示为公里、米
/** * calc_map_distance() , 根据地图上的两个点各自的x,y坐标,计算出2点之间的直线距离 * @param array $point_1 第1个点的x,y坐标 array( ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- AndroidCharts为折线图表添加y坐标
AndroidCharts 是一款轻量级的图表显示控件,对比起Android-Charts和AChartEngine来说简单和活泼了很多,适合数据展示不需要太过详细专业的场合,它支持简单且带动画的折线 ...
- 删除坐标相同文本对象 按照原y坐标排序
;; ;;程序名称:对象水平对齐程序,并且按照竖直方向排列 ;;执行命令:tb2 ;;程序功能:将选定的对象左对齐,并且按照竖直方向排列. ;; (defun c:tb2(/ selobjs oldc ...
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- numpy的shape 和 gt的x、y坐标之间容易引起误会
用numpy来看shape,比如np.shape(img_data),会得到这样的结果(600,790,3) 注意:600不是横坐标,而是表示多少列,790才是横坐标 用numpy测试就可以看出: & ...
- 切换tab页
//切换Tab页 $('#tt').tabs({ border:false, onSelect:function(title){ ...
随机推荐
- zabbix4.4.2安装部署
1.下载阿里的源,执行 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2 ...
- mysql-sql分析策略及优化
tranlation事务:从失败中回复到正常状态的方法多个应用并发访问数据库时,提供隔离方法 acid原子性:要么成功.要么失败一致性:数据保持“合理性”隔离型:多个事务同时并发执行,每个事务就像各自 ...
- 《深入理解Java虚拟机》读书笔记六
第七章 虚拟机类加载机制 1.类加载的时机 虚拟机的类加载机制: 虚拟机把描述类的数据从class文件中加载到内存,并对数据进行校验.转换解析和初始化,最终形成了可以被虚拟机直接使用的Java类型,这 ...
- 题解【洛谷P3574】[POI2014]FAR-FarmCraft
题面 简化版题意: 有一棵 \(n\) 个点的树,有边权. 你初始在 \(1\) 号节点,你需要走遍整棵树为 \(2 \sim n\) 号点的居民分发电脑,但你的汽油只够经过每条边恰好两次. 一个居民 ...
- orcal时区
查询数据库时区 select dbtimezone from dual 修改时区 alter database set time_zone='+8:00';
- Java对象构成所有Java应用程序的基础
通过在优锐课的ange交流下,掌握了很多编程思想方法 特来分享 对象具有状态和行为 Java中的对象以及其他任何``面向对象''语言都是所有Java应用程序的基本组成部分,代表了你可能在你周围找到的任 ...
- c数据结构 绪论
四种逻辑结构:1:集合结构 结构中的数据元素除了同属于同一个集合的关系外,无任何其他关系2:线性结构 结构中的数据元素之间存在着一对一的线性关系3:树形结构 结构中的数据元素之间存在着一对多的层次关系 ...
- Python与C语言基础对比(Python快速入门)
代码较长,建议使用电脑阅读本文. 10分钟入门Python 本文中使用的是Python3 如果你曾经学过C语言,阅读此文,相信你能迅速发现这两种语言的异同,达到快速入门的目的.下面将开始介绍它们的异同 ...
- 【 js 上传文件】
上传文件 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- webpack4.41.0配置二(加载器_url-loader/babel-loader/sass-loader)
loader是webpack用来预处理源文件的,比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件 (注:以下的配置代码不一定与下方一摸一样,具体与官网上https://webpa ...