<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的更多相关文章

  1. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  2. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  4. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  5. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  6. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  7. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  8. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

  9. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

随机推荐

  1. pl/sql基础知识—触发器

    n  触发器简单介绍 触发器是指隐含执行的存储过程,它不是由程序员或者是DBA来显式调用,而是因为某个操作引发执行的.当定义触发器时,必须要指定触法的事件和触发的操作,常用的触发事件包括insert, ...

  2. c++11的新特性

    好奇心来源于下面的一段代码, 一个是unordered_map, 这是c++11新加的container. 另外还有unordered_set, unordered_multimap, unorder ...

  3. 解决/home磁盘空间不足问题

    最近在Linux下做仿真实验,但是渐渐的发现,/home原来分配的空间不足.通过先建硬盘分区,然后挂载到/home文件的方法,在网上查了好多资料 建立分区并挂载分区http://www.se126.c ...

  4. 小爬爬2:fiddler安装和了解fiddler

    1.解压安装就可以了 fiddler优点:抓取移动和PC机器的请求 2.首先进行证书的配置 如果不配置只能抓取http的请求,https不能抓取. 先选择,第一个"清空所有内容" ...

  5. BZOJ 1934洛谷2057善意的投票题解

    题目链接 BZ链接 又是一道玄学的网络流题 我们这样建图: 对于同意观点1的原点向其连边,对于同一观点2点向汇点连边 然后如果两个人是朋友,就连一条双向边. 为什么这样是对的呢? 对于一个人来说,他要 ...

  6. Ubuntu18.10创建软件图标

    解压下载包都/opt目录 创建并编辑/usr/share/applications/xxx.desktop [Desktop Entry] Encoding=UTF-8 Name=Pycharm Co ...

  7. android完美的退出方法

    http://blog.csdn.net/get123/article/details/9001214

  8. HDU-1260_Tickets

    Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Des ...

  9. Python基础：01Python标准类型分类

    有三种不同的模式可以帮助我们对基本类型进行分类,每种模型都展示了这些类型之间的相互关系. 一:存储模式 这种分类模式,看这种类型的对象能保存多少个对象. 一个能保存单个字面对象的类型称为原子或标量存储 ...

  10. 创建我的flask第一个应用（一）

    本地python版本 (venv) dongge@dongge-PC:/data/webroot$ python --version Python 3.6.5 创建flask命令 $mkdir myp ...