VUE移动端仿头条TAB切换

最新推荐文章于 2024-05-30 09:48:23 发布
最新推荐文章于 2024-05-30 09:48:23 发布
阅读量1.5k 收藏 3
点赞数 2
分类专栏： Vue JS 文章标签： Tab切换 Vue仿头条APP Animate.css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jone_hui/article/details/103627560
版权
Vue 同时被 2 个专栏收录
38 篇文章 2 订阅
订阅专栏
JS
37 篇文章 0 订阅
订阅专栏

效果跟头条的Tab跟随差不多,暂时没有实现tab始终固定在中间显示 ! 后期优化吧 ~

没有找到合适的插件, 采用了VUE的 Transition + v-touch 以及 Animate.css 手写实现 !

( 图片是借的, 效果类似 ) 传送门-Gighub =>

使用注意:

移动端滑动, v-touch 需要进行脚手架依赖安装才可以使用

1 . cnpm install vue-touch@next --save dev

2 . main.js 引入使用 import VueTouch from 'vue-touch' ; Vue.use(VueTouch, { name: 'v-touch' })

 

 

 

葬我以时光
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 6472
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
头条案例文章评论功能模块
m0_66430536的博客
03-16 972
文章评论 #1、业务功能分析 #2、展示文章评论列表 #2.1、准备组件 为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。 创建组件src/views/article/components/comment-list.vue <template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load=".
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
08-27
前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab，觉的非常实用，大家可能在做项目时会用到，感兴趣的朋友跟随脚本之家小编一起学习吧
用vue语法写的移动端tab栏切换-unapp
qq_44170622的博客
08-21 538
我们在移动端开发的过程中，tab栏切换是很常见的 然后我们附上开发过程中，常见的代码写法，感觉还行吧 <template> <view class="container"> <view class="tabs u-flex"> <view @tap="switchTab(index)" :class="[tabIndex ===index ? 'active' : '', 'tab']" v-for="(item, index) in tab
推荐项目：Vue-Tabs-Chrome——打造Chrome风格的标签页组件
最新发布
gitblog_00089的博客
05-30 550
推荐项目：Vue-Tabs-Chrome——打造Chrome风格的标签页组件 项目地址:https://gitcode.com/viewweiwu/vue-tabs-chrome 1、项目介绍 Vue-Tabs-Chrome 是一个基于 Vue2 开发的组件，它能够帮助开发者轻松实现浏览器中Chrome风格的可拖拽、可关闭的标签页效果。如果你正在寻找一个简单易用、功能齐全的标签页解决方案，那么这个...
tab切换的效果——仿照今日头条APP的切换效果
weixin_30596735的博客
04-26 483
说点废话;不知道是哪一版本起头条的tab切换效果就变了，一直琢磨着这个事，去度娘那里也没有什么结果；正好这两天有空就尝试做了一下；用前端的技术来实现； 先看效果吧；上面的tab随着slide滑动，上面的字体颜色也会随着改变,代码在最后面哟； 一直没有思路;尝试遮罩层是不可行的，直到今天早上偶然看见clip这个属性；就发现一切都好办了； clip这个属性不怎么用到，我对这个属性，...
基于vue实现移动端tab切换方式
青衫折扇的博客
12-26 1922
废话不多说了,这种方法比较灵活, 简单 思路 1: 创建导航组件 2: 创建子组件 3: 配置子组件路由 接下我们来看一下代码吧 导航组建 <template> <div> <!-- 头部 --> <header id="header"> <div class="pure-box flex-box-x"&g...
vue移动端手写tab栏切换
weixin_45108907的博客
05-24 2874
复制代码结构----供自己直接使用： <ul class="tabsbox"> <li> <a @click="cur=0" :class="{active:cur==0}">全部</a> **//注意a标签中的href必须去掉，否则路由出现问题** </li> <li>...
Vue移动端项目（一）
qq_48687155的博客
08-20 3203
Vue移动端项目
Vue组件收集
m0_46199530的博客
06-10 1438
Vue组件收集 文章目录Vue组件收集UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2
VUE组件汇总
weixin_45566319的博客
08-29 329
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 U...
基于Vue20高仿今日头条单页应用
08-10
基于Vue 2.0高仿 <今日头条> 单页应用
touchTab:适用于移动端滑动切换tab组件
06-07
touchTab 横向滑动tab组件 适用于移动端横向滑动tab组件使用，通过对外暴露相应的事件完成相应的切换逻辑 ###对外事件 @customEvent canTouchTabMove touchmove时触发，此时可处理滑动tab @customEvent clearTouchTabMove touchend时触发，可以滑动但不满足切换条件时触发 @customEvent canTouchTabSwitch touchend时触发，达到切换条件，触发切换事件 ###使用 var touchTabIns = new touchTab({ el: $( document.body ), //绑定事件的dom元素 id或jq对象 offsetX: 50 //触摸起止X偏移值，大于些值才会触发下拉事件 }); $.bind(touchTabIn
Lytab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件
08-10
Ly-tab 一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件
仿今日头条顶部导航栏效果
01-06
随着时间的推移现在的软件要求显示的内容越来越多，所以要在小的屏幕上能够更好的显示更多的内容，首先我们会想到底部菜单栏，但是有时候像今日头条新闻客户端要显示的内容太多，而且又想在主界面全部显示出来，所以有加了顶部导航栏。
Vue切换Tab动态渲染组件的操作
10-14
主要介绍了Vue切换Tab动态渲染组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+实现（移动端、PC端）滑动切换页面（swiper）
仄言的博客
05-16 9882
vue+Swiper实现页面滑动切换 效果图如下： 安装swiper4 npm install swiper 2.vue中引入 首先在main.js文件中引入swiper的css文件。 import "swiper/dist/css/swiper.min.css"; 然后对于swiper组件，在组件中引入，也可以全局引入，但...
vue实现一个tab组件（超出可滚动自动居中）
kaiup的博客
06-19 1234
vue3实现可自动滚动tab选型卡
vue.js实现自定义tab滑动切换效果
lemon今天学习了吗？的博客
08-25 4668
前言：在使用uni-app组件时，需求方要求点击头部的tab切换时，首尾两个点击就在最前面和最后面高亮显示即可，中间的要求选中哪个tab哪个tab就在滑到最中间显示。如this.$refs.myTabRef.$el获取的就是该标签的类名my-tab。如this.$refs.myTabRef获取的myTabRef这个组件，可以使用myTabRef上的方法。获取组件实例 ，可以使用组件的所有方法 （使用在组件上）。vm.$refs：获取页面中所有含有ref属性的DOM元素（普通元素）。...
vue 移动端tab组件
08-27
Vue移动端tab组件是一种用于移动端应用开发中实现标签切换功能的组件。这种组件通常由一系列可点击的标签和对应的内容区域组成。 首先，Vue移动端tab组件需要根据数据渲染出标签和内容区域。可以通过v-for指令遍历...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值