请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需要一步,快速开始

搜索
开启左侧

前端开发之使用纯CSS实现炫酷Tab切换

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
效果展示

154009rstsesr82asm2zbb.jpg


选中样式制作


  • 将每个 tab 设置固定宽度。
  • 每个tab 添加相对定位,居中,行高
  • 添加伪类,伪类设置绝对定位,在底部。
  • 设置伪类的宽度为 0%(伪类会继承该元素的宽度)
  • 设置选中时候的伪类宽度为50%(视情况而定)
  • 给元素添加过渡样式
HTML代码(wxml)
t
tttt{{item.name}}
tttCSS(less)
实现效果大致为这样的:
154009xvp6zpzvl7y0uoyv.jpg


拓展

PS: 以上为纯CSS实现部分,如果项目 tab数量 为通过接口动态获取的,可以适当加入一些 js 计算。
JS 思路:

  • 获取当前选中的 tab 的宽度
  • 获取当前选中 tab 以及它之前全部 tab 的宽度总和。
  • 获取当前屏幕宽度
  • 判断当前选中 tab 是否超过
  • 移动当前 tabs 到屏幕的重心点位置
大致为(以微信小程序为例):
ps: getElSize() 函数代码为:
这样就可以实现动态 tab 切换了:
154010vibe4i1ibl1lur6b.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

  • 0 关注
  • 0 粉丝
  • 4 帖子
广告招商