店铺设计网站推荐湖南平台网站建设设计

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.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. 在按钮点击的时候，添加动画。

代码已资源绑定