vue之封装tab类组件
vue之封装tab类组件
需求:点击【上一步】、【下一步】按钮,切换tab,且有淡入浅出的动画。
CSS样式方面
<div class="parent">
<div class="childDiv" id="div0">0</div>
<div class="childDiv" id="div1">1</div>
<div class="childDiv" id="div2">2</div>
<div class="childDiv" id="div3">3</div>
<div class="childDiv" id="div4">4</div>
<div class="childDiv" id="div5">5</div>
<div class="childDiv" id="div6">6</div>
<div class="childDiv" id="div7">7</div>
<div class="childDiv" id="div8">8</div>
<div class="childDiv" id="div9">9</div>
</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>
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">0</div>
<div class="childDiv" id="div1">1</div>
<div class="childDiv" id="div2">2</div>
<div class="childDiv" id="div3">3</div>
<div class="childDiv" id="div4">4</div>
<div class="childDiv" id="div5">5</div>
<div class="childDiv" id="div6">6</div>
<div class="childDiv" id="div7">7</div>
<div class="childDiv" id="div8">8</div>
<div class="childDiv" id="div9">9</div>
</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.1.1数组的长度
(tab长度)
1.1.2起始的下标
(游标)
1.1.3步长
- 【上一步】、【下一步】按钮的逻辑
2.1.1 【下一步】如果说:if(游标arrIndex
+步长arrstep
>数组的长度
的时候,说明已经到底了。这个时候,需要显示后面三个,其余的隐藏即可) else(显示游标arrIndex
后面的三个元素即可,别的隐藏)
2.1.2 【上一步】 如果说if(游标arrIndex
-步长arrstep
<0 的时候,说明已经到头了。这个时候,只需要显示前面三个,其余的隐藏即可) else(显示游标arrIndex
后面的三个元素即可)- 在按钮点击的时候,添加动画。
代码已资源绑定