<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. Directx11教程(45) alpha blend(2)

    原文:Directx11教程(45) alpha blend(2)     在myTutorialD3D11_40中,我们在场景中再添加一个box,并把box放在水里,实现半透明的效果.如下图所示: ...

  2. Effective Modern C++：05右值引用、移动语义和完美转发

    移动语义使得编译器得以使用成本较低的移动操作,来代替成本较高的复制操作:完美转发使得人们可以撰写接收任意实参的函数模板,并将其转发到目标函数,目标函数会接收到与转发函数所接收到的完全相同的实参.右值引 ...

  3. execute和submit的区别与联系

    execute和submit都属于线程池的方法,execute只能提交Runnable类型的任务,而submit既能提交Runnable类型任务也能提交Callable类型任务. execute会直接 ...

  4. 自己动手打造基于 WKWebView 的混合开发框架（一）WKWebView 上手

    http://www.cocoachina.com/ios/20150911/13301.html 代码示例:https://github.com/johnlui/Swift-On-iOS/tree/ ...

  5. Ubuntu 如何编译安装第三方库

    在工程应用中都会用到第三方库,标准库是在我们安装IDE环境或系统自带已经编译好的库,我们是可以直接调用的,而第三方库需要我们自己下载,编译和安装后才能使用,这里我们说的是Ubuntu如何使用cmake ...

  6. C++中的union

    1:,像任何类一样,union可以指定保护标记使成员成为公用的.私有的或受保护的.默认情况下,union 表现得像 struct:除非另外指定,否则 union 的成员都为 public 成员. 2: ...

  7. css字体大小单位

    1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...

  8. 00docker安装和简介

    Docker是用于开发.装载和运行应用的开放平台.Docker项目的目标是实现轻量的操作系统级虚拟化解决方案,它提供了一种在容器中安全隔离地运行应用程序的方式.可以在宿主机上运行多个容器. Docke ...

  9. TCP/IP网络编程 读书笔记1

    本篇主干内容是TCP/IP网络编程1-9章学习笔记 1. linux文件描述符 描述符从3开始以由小到大的顺序编号,0,1,2,分配给标准I/O用作标准输入.标准输出和标准错误. 2. 协议族与套接字 ...

  10. 异常处理之多重catch

    package com.sxt.exception.test1; import java.util.InputMismatchException; import java.util.Scanner; ...