<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. Tips：取消UICollectionView的隐式动画

    http://www.cocoachina.com/ios/20151204/14211.html UICollectionView在reloadItems的时候,默认会附加一个隐式的fade动画,有 ...

  2. Ubuntu18.04+windows10双系统时间同步教程

    前言: 系统安装windows10和Ubuntu18.04双系统后会出现时间不同步的情况,往往windows系统的时间会有错误,一般会有8个小时的误差. 原因: 主要因为本地时间与硬件时间的时差: 本 ...

  3. HDU-1160_FatMouse's Speed

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Sp ...

  4. Skiing 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛H题(拓扑序求有向图最长路)

    参考博客(感谢博主):http://blog.csdn.net/yo_bc/article/details/77917288 题意: 给定一个有向无环图,求该图的最长路. 思路: 由于是有向无环图,所 ...

  5. 基本的Sql编写注意事项

    基本的Sql编写注意事项 尽量少用IN操作符,基本上所有的IN操作符都可以用EXISTS代替. 不用NOT IN操作符,可以用NOT EXISTS或者外连接+替代. Oracle在执行IN子查询时,首 ...

  6. Docker 学习笔记 2019-05-27

    Docker 学习笔记 2019-05-27 可以很方便的打包应用. 使用 docker-compose 更方便. 每个发行版安装方式不一样,如果 centos 直接安装很可能会安装成旧版本. Lin ...

  7. 如何创建一个非常酷的3D效果菜单

    http://www.cocoachina.com/ios/20150603/11992.html 原文地址在这里.原文 去年,读者们投票选出了Top5的iOS7最佳动画,当然也很想看到有关这些动画如 ...

  8. Microsoft.SQL.Server2012.Performance.Tuning.Cookbook学习笔记(二)

    Creating trace with system stored procedures Following are the stored procedures which you should kn ...

  9. Oracle基础学习4--Oracle权限传递

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wang379275614/article/details/32215325 以下将用一个实例来解说: ...

  10. HZOJ 通讯

    B. 通讯 题目描述 “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此得知了伦太郎制作出了电话微波炉(仮). 为了掌握时间机器的技术, ...