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){ ...
随机推荐
- Linux 环境c++ 编码转换
#include <iconv.h> //代码转换:从一种编码转为另一种编码 static int CodeConvert(char *from_charset,char *to_char ...
- error C2825: '_Iter': 当后面跟“::”时必须为类或命名空间 -- 原因可能是参数错误或者自定义函数名和库函数名冲突
今天运行程序的时候遇到了下面这个bug > B1020.cpp >e:\vs2013\vs2013_rtm_ult_chs\data\vc\include\xutility(): erro ...
- redhat 桌面系统配置
1.grouplist命令 yum grouplist 回车 2. yum groupinstall "GNOME Desktop" "Graphical Admini ...
- MyEclipse把普通的项目变成hibernate项目
- IntelliJ IDEA常规配置教程
IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具(git.sv ...
- dict 字典合并
实例 1 : 使用 update() 方法,第二个参数合并第一个参数 def Merge(dict1, dict2): return(dict2.update(dict1)) 实例 2 : 使用 ...
- UNION JOIN 连接表
使用UNION JOIN进行多表连接,与9.3节介绍的各种表的连接类型不同,它并不对表中的数据进行任何匹配处理,而只是把来自一个源表中的行与另一个源表中的行联合起来,生成的结果表中包括第一个表中的所有 ...
- asp.net 的 web form 过时了吗
本文链接:https://blog.csdn.net/closurer/article/details/79526006web form 其实是一个超前的设计. 每个厂商都希望服务器端和客户端采用同样 ...
- AcWing 893. 集合-Nim游戏
//只能拿某些特定个数的石子 #include <cstring> #include <iostream> #include <algorithm> #includ ...
- 洛谷P1433 吃奶酪
#include<iostream> #include<math.h> using namespace std ; ; int n; bool st[N]; double x[ ...