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标签部分. ...
随机推荐
- 遗传算法MATLAB实现(3):多元函数优化举例
多峰的Shubert为: 求f(x,y)在[-10,10]x[-10,10]上的最大值. MATLAB代码: fun_mutv函数为: function my=fun_mutv(x,y) t1=zer ...
- nodeJs koa-generator脚手架
koa-generator 脚手架 全局安装:cnpm install -g koa-generator 查看版本:koa2 --version 创建项目:koa2 project 默认的是用jade ...
- Hdu 1729 Nim博弈
点击打开题目链接 之前没做过这题,因为学弟问到我如果来求该题的sg值,才做了这题. 首先, 是多堆Nim博弈毫无疑问,这题是往一个有固定容量的箱子里放石子,和从一堆石子里面拿出石子是一个道理. 和传统 ...
- 微信小程序云数据库——where查询和doc查询区别
用法 条件查询where 我们也可以一次性获取多条记录.通过调用集合上的 where 方法可以指定查询条件,再调用 get 方法即可只返回满足指定查询条件的记录,比如获取用户的所有未完成的待办事项,用 ...
- Python小技巧整理
一.python小工具: 1.内置下载和网站: 进入相应目录:2.x python -m SimpleHTTPServer 3.x python -m http.server 2.字符串转换为JSON ...
- LeetCode108 Convert Sorted Array to Binary Search Tree
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. (M ...
- 用div漂浮快实现与表单无关的多文件上传功能。
我项目有这个需求,多文件上传,而且要及时显示到表单上,这样的话就不能与表单相关. 由于我对前端不熟,我就实现了这么一个功能,通过button触发一个div漂浮块,然后多文件上传,之后通过js把文件名显 ...
- React 从零搭建项目 使用 create-react-app脚手架
一.安装 npm install -g create-react-app 版本校验:create-react-app --version 二.创建项目 create-react-app指令默认调用np ...
- P4930「FJ2014集训」采药人的路径
题目:P4930「FJ2014集训」采药人的路径 思路: 这篇不算题解,是让自己复习的,什么都没说清楚. 很久没有写点分治了,以前为了赶课件学的太急,板子都没打对就照着题解写题,导致学得很不扎实. 这 ...
- Android学习笔记之 SimpleAdapter 中添加按钮响应事件,getView的重写
Andriod 里面的ListView是一个显示列表数据的控件,常用适配器SimpleAdapter进行绑定,绑定代码如下: ListView lstView = (ListView) this.fi ...