vue之封装tab类组件

vue之封装tab类组件

需求：点击【上一步】、【下一步】按钮，切换tab，且有淡入浅出的动画。

CSS样式方面

<div class="parent">
	<div class="childDiv" id="div0">0div>
		<div class="childDiv" id="div1">1div>
		<div class="childDiv" id="div2">2div>
		<div class="childDiv" id="div3">3div>
		<div class="childDiv" id="div4">4div>
		<div class="childDiv" id="div5">5div>
		<div class="childDiv" id="div6">6div>
		<div class="childDiv" id="div7">7div>
		<div class="childDiv" id="div8">8div>
		<div class="childDiv" id="div9">9div>
div>


<style>
.parent{
	background:green;
	width:600px;
	height:100px;

    // 设置flex布局，且当子元素撑开父元素的时候显示滚动条。
    display:flex;
    overflow-y: auto;
}


.childDiv{
	background:red;
	width:200px;
	height:100px;
	border:1px solid black;

    // 此时，让div保持原有宽度，撑开父元素后，出现滚动条，而不是改变宽度自适应。
	flex-shrink: 0;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

JS方面

<div id="myDiv1">需求：点击切换数组中的item，且添加动画div>
<div id="before" style="margin-top:50px"> 上一个 div>
<div style="background:green;width:600px;height:100px;display:flex;overflow-y: auto;" id="myDiv2">
		<div class="childDiv" id="div0">0div>
		<div class="childDiv" id="div1">1div>
		<div class="childDiv" id="div2">2div>
		<div class="childDiv" id="div3">3div>
		<div class="childDiv" id="div4">4div>
		<div class="childDiv" id="div5">5div>
		<div class="childDiv" id="div6">6div>
		<div class="childDiv" id="div7">7div>
		<div class="childDiv" id="div8">8div>
		<div class="childDiv" id="div9">9div>
div>
<div id="after" style="margin-top:20px"> 下一个 div>	
<style>
.coup-anim {
	/* 淡入 */
	animation: fadeIn 4s .1s ease both;
}

@keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(400upx)
 }

 100% {
  opacity: 1;
  transform: translateY(0)
 }
}


.childDiv{
	background:red;
	width:200px;
	height:100px;
	border:1px solid black;
	flex-shrink: 0;
}
style>
<script>
// 声明一个变量，用于记载tab总长度
var total = 10;
// 声明一个变量，用于记录移动到那个位置了
var arrIndex = 0;
// 声明一个变量，用于记录移动的步长
var arrStrp = 3;

// 一次性移动三个，且添加动画 
var myDiv2 = document.getElementById("myDiv2");

var before = document.getElementById("before");
before.addEventListener("click", function() {
		/*
			动画方面注释：
				先移除动画，后添加动画。
				注意动画需要延迟触发，否则触发不了
		*/
		// 移除动画
		myDiv2.classList.remove("coup-anim");
	    // 延迟触发动画,否则动画触发不了
		setTimeout(()=>{
			myDiv2.classList.add("coup-anim");
		},10)
		
		
		/*
			重置dispaly的状态
		*/ 
		for(let i=0;i<=total-1;i++){
			const divI = document.getElementById("div"+i);
			divI.style.display = ""
		}
		
		/*
			正常情况，每次按照步长往前走
			但是当arrIndex-arrStrp<=0时，也就是再减减不动的时候，只显示前三个。
			
			
			且arrIndex置成0；
		*/
		// before操作的时候，arrIndex就是下标的位置。
		if(arrIndex-arrStrp<=0){
			// 只显示前面三个，别的div给隐藏掉	
			for(let i=3;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}	
			arrIndex = 0;
			return ;			
		}else{
			// 只显示前面三个，别的div给隐藏掉	
		    arrIndex = arrIndex-3;
			const myStep = arrIndex+3;
			for(let i=0;i<arrIndex;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}		
			for(let i=myStep;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}
		}
});


// 逻辑同上
var after = document.getElementById("after");
	after.addEventListener("click", function() {
		// 移除动画
		myDiv2.classList.remove("coup-anim");
		// 延迟触发动画,否则动画触发不了
		setTimeout(()=>{
			myDiv2.classList.add("coup-anim");
		},10)
		arrIndex = arrIndex+3; // 3
		// 重置dispaly的状态
		for(let i=0;i<=total-1;i++){
			const divI = document.getElementById("div"+i);
			divI.style.display = "";
		}
		if(arrIndex+arrStrp>=total){
			// 只显示后面三个
			for(let i=0;i<total-3;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}
			arrIndex = total-arrStrp;
			return ;
		}else{
			const myStep = arrIndex+3;
			for(let i=arrIndex-1;i>=0;i--){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}		
			for(let i=myStep;i<total;i++){
				const divI = document.getElementById("div"+i);
				divI.style.display = "none"
			}	
		}
		
});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

总的来说是这个思路：

1. 需要三个确定的数值：(这个是相通的，比如分片上传。需要这些参数，也是为了将数组分片)
   1.1.1 数组的长度(tab长度)
   1.1.2 起始的下标(游标)
   1.1.3 步长
2. 【上一步】、【下一步】按钮的逻辑
   2.1.1 【下一步】如果说：if（游标arrIndex + 步长arrstep > 数组的长度的时候，说明已经到底了。这个时候，需要显示后面三个，其余的隐藏即可） else（显示游标arrIndex后面的三个元素即可，别的隐藏）
   2.1.2 【上一步】 如果说if（游标arrIndex - 步长arrstep<0 的时候，说明已经到头了。这个时候，只需要显示前面三个，其余的隐藏即可） else（显示游标arrIndex后面的三个元素即可）
3. 在按钮点击的时候，添加动画。

代码已资源绑定