tab选项卡平滑滚动vue
<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>
tab选项卡平滑滚动vue的更多相关文章
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- 移动web：tab选项卡
平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
随机推荐
- python基础总结篇
''' 数据类型 数值 int: 字符串转int,只能转纯数字组成的字符串 小数,去掉小数部分 bool,true 1 false 0 float: 字符串转float,要么是纯数字的字符串,要么是纯 ...
- Redis、MPP、kafka 、MongDB简介
Redis :间值数据库,适合缓存用户Session会话与经常需要查的数据1.Redis集群,为什么在项目中使用集群 1.持久化,持久化是最简单的高可用方法(有时甚至不被归为高可用的手段),主要左右 ...
- 个人总结OLinux上安装oracle11G Data Guard
一.准备环境 1.swap要求 swap最好设置3G以上,如果安装过程中报swap不足,可参考: https://www.jianshu.com/p/46635a12c8d0 2.官网必须安装包列表: ...
- Person Re-identification 系列论文笔记（一）：Scalable Person Re-identification: A Benchmark
打算整理一个关于Person Re-identification的系列论文笔记,主要记录近年CNN快速发展中的部分有亮点和借鉴意义的论文. 论文笔记流程采用contributions->algo ...
- 数据人看Feed流-架构实践
背景 Feed流:可以理解为信息流,解决的是信息生产者与信息消费者之间的信息传递问题.我们常见的Feed流场景有:1 手淘,微淘提供给消费者的首页商品信息,用户关注店铺的新消息等2 微信朋友圈,及时获 ...
- Linux的 crontab定时任务小记
编辑任务 crontab -e 查看任务 crontab -l 任务配置基本格式:* * * * * command分(0-59) 时(0-23) 天(1-31) 月(1-12) 周(0-6,0代 ...
- Auto CAD 安装问题 “acad.exe - 系统错误 ”
Auto CAD 安装不上,提示“cad装不上 提示无法启动此程序,因为计算机中丢失 ac1st16.dll” 解决方法: 我的电脑——>右键 属性——>高级选项卡(win7的是高级系统设 ...
- Audio Session Programming Guide
http://www.cocoachina.com/ios/20150615/12119.html
- python 列表长度
- Python基础：18类和实例之二
1:绑定和非绑定 当存在一个实例时,方法才被认为是绑定到那个实例了.没有实例时方法就是未绑定的.在很多情况下,调用的都是一个绑定的方法. 调用非绑定方法并不经常用到,其中一个主要的场景是:派生一个子类 ...