tab选项卡平滑滚动vue
2024-09-03 07:07:08
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul {
padding:
}
ul li {
list-style: none;
}
.tab ul{
position: relative;
background: #;
}
.tab ul li {
display: inline-block;
padding: 50px;
width: 100px;
height: 25px;
margin: ;
background: #ccc;
text-align: center;
border: 1px solid #;
}
.tab .bottom {
position: absolute;
left: ;
width: 100px;
height: 3px;
background: #f00;
transition: all .2s;
}
</style>
</head>
<body>
<div class="tab" id="box">
<ul ref ="tabWrapper">
<li v-for="(item, index) in list" @click="tabClick(index, $event)">{{item}}</li>
<div class="bottom" :style="style"></div>
</ul>
</div>
</body> <script>
new Vue({
el:'#box',
data:{
list: [,,,,],
style: {}
},
mounted() {
this.$nextTick(() => {
const firstLi = this.$refs.tabWrapper.querySelector('li:nth-of-type(1)')
this.style = {
left: firstLi.offsetLeft + 'px',
width: firstLi.offsetWidth +'px'
}
})
},
methods:{
tabClick(index, e) {
console.log(e)
console.log(e.target.offsetWidth)
console.log(e.target.offsetLeft)
this.style = {
left: e.target.offsetLeft + 'px',
width: e.target.offsetWidth +'px'
}
}
}
});
</script>
</html>
最新文章
- [Mahout] 完整部署过程
- CentOS 6.5下配置iSCSI网络存储
- iOS开发之网络数据解析（一）--JSON解析简介
- IT公司100题-16-层遍历二元树
- DIV CSS布局容易忽略的属性
- Android 异步加载神器Loader全解析
- 周末“干活”之 Mesos Meetup
- LinGo:疏散问题——线性规划,0-1规划
- 【微信公众号】验证用户OpenID是否关注某个公众号
- VMware workstation 10.0的永久key
- php生成html 伪静态？？
- C#:求1到100的和
- 两个Map的对比，三种方法，将对比结果写入文件。
- android 开发 View _7_ 动态自定义View
- Mysql无法选取非聚合列
- python读、写、修改、追写excel文件
- 解决maven jmxtools 缺失的问题
- 【Ctsc2011】幸福路径
- spring cloud gateway之filter篇
- svn 使用笔记（一）