vue左右滑动切换tab,vue动态tab
当创建的标签标签超出页面可视区域时自动滚动一个标签标签距离，并可手动点击滚动标签标签，需要的朋友们下面随着小编来一起学习学习吧
当创建的标签标签超出页面可视区域时自动滚动一个标签标签距离，并可手动点击滚动标签标签，实现效果请看GIF格式格式图
效果预览GIF格式格式图
模板
div class=主框
按钮@click=添加添加/按钮
div class=main-box-tab
我@click=上一个/i
我@click=下一个/i
div class= main-box-tab-content ref= tabs
div class=主框选项卡滚动
div v-for=(item，index) in tabs :key=index
:class= { tab-item-action :action name===item。name， tab-item:actionName！==item.name}
@点击。stop= click选项卡(项目。名称，索引)’
span{{item.meta.title}}/span
我点击了一下。stop= close(item。名称)/I
/div
/div
/div
/div
div class=主框内容
div{{actionName}}/div
/div
/div
/模板
脚本
导出默认值{
名称："索引",
data() {
返回{
制表符：[],
moveX: 0，
计数：1,
未被占用：0,
tabsCount: 0，
动作名称："测试1"
}
},
观察：{
actionName(val) {
让len=this . tab . length
//如有重复数据退出后续函数执行
对于(设I=0；我leni ) {
if (this.tabs[i].name===val) {
这个. nextTick(()={
这个。翻译x((I 1-this。制表符计数)* this。宽度-这个。失业)
})
返回
}
}
this.tabs.push({
名称：` test${this.count} `，
元：{
标题：` test${this.count}
}
})
这个. nextTick(()={
//(总共有多少个标签-未偏移时可见的元素个数) * 单个标签标签元素长度-被遮挡标签元素的可见部分的宽度
这个。翻译x((这个。标签。长度-这个。制表符计数)* this。宽度-这个。失业)
})
}
},
已安装(){
this.tabs.push({
名称：` test${this.count} `，
元：{
标题：` test${this.count}
}
})
这个. nextTick(()={
让制表符=这个refs.tabs
let get style=getComputedStyle(tabs。儿童[0]).children[0]，null)
let margin left=parse float(get style。左边距。substr(0，getStyle.marginLeft.length - 2))
设margin right=parse float(获取样式。右边距。substr(0，getStyle.marginRight.length - 2))
//元素实际宽度=元素的宽度外边距
这个。宽度=边距左边距右边距制表符。儿童[0].儿童[0]。偏移距离
/**
* 以下注释计算方式用于理解实现逻辑
**/
////可视区域能放入多少个元素=可视区域的宽度/子元素实际宽度
//let num=tabs。offsetwidth/this。宽度
////被遮挡标签元素的可见部分的宽度=可见区域的宽度- (子元素实际宽度*数量转为整数)
//这个。失业=制表。offsetwidth-(这个。width * parse int(num))
//最终精简为取余（得数跟上面的计算是一样的)
这个。失业=制表。offsetwidth % this。宽度
//转为整数
这个。tabs count=parse int(tabs。偏移宽度/this。宽度)
})
},
方法：{
add() {
这个。计数
这个。action name=` test $ { this。计数}
},
/**
* 切换标签标签页
**/
单击选项卡（名称){
if (this.actionName！==name) {
this.actionName=name
}
},
/**
* 关闭标签标签页
**/
关闭（名称){
让len=this . tab . length
让jumpName=null
如果(镜头1) {
对于(设I=0；我leni ) {
if (this.tabs[i].name===name) {
拼接(一，1)
jumpName=this.tabs[i？i - 1 : 0 】.名字
if (this.actionName！==跳转名name===这个。动作名称){
this.actionName=jumpName
}
这个. nextTick(()={
this.previous()
})
返回
}
}
}
},
/**
* 往右偏移
**/
下一个(){
//滚动宽度获取不准确
//使用this.width * this.tabs.length计算出总长度
设总宽度=这个。宽度*这个。标签。长度
这个. nextTick(()={
让dom=这个refs.tabs
//可视区域滚动区域（滚动区域大于可视区域才可以移动)
//移动距离可视区域=滚动区域的宽度（上一次的宽度，当点击时才是实际宽度)滚动区域
如果(DOM。客户端宽度总宽度。movex DOM。客户端宽度总宽度){
//this.moveX为0减去空余空间的宽度
this.moveX=this.moveX？这个。宽度：这个。宽度-这个。无人居住
this.translateX
}
})
},
/**
* 往左偏移
**/
上一个(){
if (this.moveX 0) {
this.moveX -=this.width
this.translateX
}
},
/**
* 开始移动数字正射影像图
**/
translateX(x) {
this.moveX=x 0？0 : x
这个参考文献。标签。儿童[0]。风格。transform=` translate x(-$ { this。movex } px)`
}
}
}
/脚本
样式lang=scss 范围。主箱{
高度：500像素
宽度：500像素
填充：10px 20px 20px 20px。主框-选项卡{
位置：相对；
填充：10px 20px
溢出：隐藏；
我{
位置：绝对；
光标：指针；
底部：15px
：第n个孩子(1) {
左：0;
}
：第n个孩子(2) {
右：0;
}
}。主框-选项卡-内容{
溢出：隐藏；主框-标签-滚动{
过渡：转换5s
显示器：flex
对齐-项目：居中；
部门{
伸缩：0;
光标：指针；
宽度：130像素
高度：25px
保证金：0 5px
显示器：flex
对齐-项目：居中；
justify-content:space-between；
span，i {
字体大小：12px
}
跨度{
左边距：10px
溢出：隐藏；
空白：nowrap
文本溢出：省略号；
}
我{
右边距：10px
}
}
}
}。选项卡-项目{
颜色：# cccccc
背景色：rgba(255，255，255，5);
border-radius:0 1px 0 1px；
边框：1px固体# 052141
}。选项卡-项目-操作{
颜色：# ffffff
背景：rgba(0，180，255，0.8)；
border-radius:0 1px 0 1px；
边框：1px纯色# 1E2088
}
}。主框内容{
高度：calc(100%-70px)；
填充：10px
边框：1px鞍棕色实心；
背景尺寸：100% 100%;
}
}
/风格
到此这篇关于某视频剪辑软件实现标签标签（标签超出自动滚动)的文章就介绍到这了，更多相关某视频剪辑软件标签标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。