濮阳网站建设哪家好,wordpress 多域名 插件,深圳网站建设流程,电子商务网站开发语言占比vue之封装tab类组件 vue之封装tab类组件CSS样式方面JS方面 vue之封装tab类组件 需求#xff1a;点击【上一步】、【下一步】按钮#xff0c;切换tab#xff0c;且有淡入浅出的动画。 CSS样式方面
div classparentdiv classchildDiv id… vue之封装tab类组件 vue之封装tab类组件CSS样式方面JS方面 vue之封装tab类组件 需求点击【上一步】、【下一步】按钮切换tab且有淡入浅出的动画。 CSS样式方面
div classparentdiv classchildDiv iddiv00/divdiv classchildDiv iddiv11/divdiv classchildDiv iddiv22/divdiv classchildDiv iddiv33/divdiv classchildDiv iddiv44/divdiv classchildDiv iddiv55/divdiv classchildDiv iddiv66/divdiv classchildDiv iddiv77/divdiv classchildDiv iddiv88/divdiv classchildDiv iddiv99/div
/divstyle
.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;
}
/styleJS方面
div idmyDiv1需求点击切换数组中的item且添加动画/div
div idbefore stylemargin-top:50px 上一个 /div
div stylebackground:green;width:600px;height:100px;display:flex;overflow-y: auto; idmyDiv2div classchildDiv iddiv00/divdiv classchildDiv iddiv11/divdiv classchildDiv iddiv22/divdiv classchildDiv iddiv33/divdiv classchildDiv iddiv44/divdiv classchildDiv iddiv55/divdiv classchildDiv iddiv66/divdiv classchildDiv iddiv77/divdiv classchildDiv iddiv88/divdiv classchildDiv iddiv99/div
/div
div idafter stylemargin-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 i0;itotal-1;i){const divI document.getElementById(divi);divI.style.display }/*正常情况每次按照步长往前走但是当arrIndex-arrStrp0时也就是再减减不动的时候只显示前三个。且arrIndex置成0*/// before操作的时候arrIndex就是下标的位置。if(arrIndex-arrStrp0){// 只显示前面三个别的div给隐藏掉 for(let i3;itotal;i){const divI document.getElementById(divi);divI.style.display none} arrIndex 0;return ; }else{// 只显示前面三个别的div给隐藏掉 arrIndex arrIndex-3;const myStep arrIndex3;for(let i0;iarrIndex;i){const divI document.getElementById(divi);divI.style.display none} for(let imyStep;itotal;i){const divI document.getElementById(divi);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 arrIndex3; // 3// 重置dispaly的状态for(let i0;itotal-1;i){const divI document.getElementById(divi);divI.style.display ;}if(arrIndexarrStrptotal){// 只显示后面三个for(let i0;itotal-3;i){const divI document.getElementById(divi);divI.style.display none}arrIndex total-arrStrp;return ;}else{const myStep arrIndex3;for(let iarrIndex-1;i0;i--){const divI document.getElementById(divi);divI.style.display none} for(let imyStep;itotal;i){const divI document.getElementById(divi);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 - 步长arrstep0 的时候说明已经到头了。这个时候只需要显示前面三个其余的隐藏即可 else显示游标arrIndex后面的三个元素即可在按钮点击的时候添加动画。 代码已资源绑定
