vant tabs标签无法手势滑动，设置swipeable无效

最新推荐文章于 2024-06-27 19:48:27 发布
最新推荐文章于 2024-06-27 19:48:27 发布
阅读量6.6k 收藏 4
点赞数 3
分类专栏： 使用指南 文章标签： css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47393070/article/details/109225574
版权

因为在移动端怎么也滑动不了标签，设置多个属性依然无用
只能去官网一个个对比标签属性
终于找到了这个问题所在，是因为在重置样式文件里设置了touch-action属性，所以滑动无效

* {
    touch-action: pan-y;
}

于是，只要在组件内重新设置就可以了

 /deep/.van-tabs__wrap {
        touch-action: manipulation;
    }

touch-action属性具体详情参考下方链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

Aiyoyoooo
关注
专栏目录
vant tabs 左右滑动效果 swipeable不生效原因
weixin_45941959的博客
12-20 3138
tabs左右滑动使用swipeable属性 swipeable不生效原因 因为touch-action: pan-y导致 改成touch-action:manipulation;
vant tabs组件无法滑动
YogaMiller的博客
11-25 2302
问题: 搭配overlay(弹出层) 上导致tabs 无法滑动 解决: 自己写个弹出层 自己尝试了 /deep/.van-tabs__wrap { touch-action: manipulation; } 还有删掉 父元素display: fixed. 也不能解决问题. 想测试下这个样式, 发现手机不能访问电脑启动的页面, 原来是网络开启的是公用网络导致文件不能共享(防火墙不用关) touch-action pan-x 设置完了, 该元素只能左右滑动不能上下滑动来触发屏幕滑动… .
移动端原生js封装轮播图和大图预览组件
最新发布
2301_78320134的博客
06-27 200
移动端的轮播图组件加大图预览组件原生js实现 非常简单易懂，轮播图和大图预览是同一个组件 复用性强 。
van-swipe中嵌套van-tabs,van-tabs无法单独滑动
tan_xiao_tan的博客
03-07 539
只需要在加一行代码即可实现"@touchmove.native.stop"当滑动tabs时阻止冒泡事件。
van-tabs无法滑动的坑
m0_60067558的博客
03-29 1074
默认这个是5个现在修改成1 因为标题部分可能宽度比较大 所以需要为1的时候开启。
van-tabs左滑或右滑后卡死
cxk_ctrl的博客
12-27 2689
van-tabs左右滑动卡死
vant中tab使用组件，并且手势滑动
Qing_X_C的博客
02-27 8264
因为要使用tab页切换组件，只能使用name匹配 而vant中的tab手势滑动又必须是索引值才生效 一直以为：鱼与熊掌不能兼得，直到今天！！！ （￣︶￣）↗　 以前的代码 <van-tabs v-model="tabName" swipeable title-active-color="#0084FF" color="#0084FF"> <van-tab name="...
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; ...
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
Vant滑动导航条
热门推荐
wI_beibei的博客
09-07 1万+
1.首先在项目根目录npm安装vant: npm i vant -S 2.使用 babel-plugin-import插件,它是一款babel插件,它能够在编译的过程中将import的写法自动转换为按需求引入的方式 # 安装 babel-plugin-import 插件 npm i babel-plugin-import -D // .babelrc 中配置 // 注意：webpack 1...
Tab菜单左右移动组件 异步加载数据
11-14
采用Jquery 及 Javascript自定义了一个TabMenuComponent对象， 能够点击左右按钮实现平滑左右移动1个或多个Tab菜单，一次移动标签个数、移动速度、正反方向移动可以定制，点击Tab异步加载内容。
vant中tabs标签页的使用定位
07-28
在 Vant 中，可以通过使用 `van-tabs` 和 `van-tab` 组件来实现标签页的使用和定位。 首先，在你的页面中引入 `van-tabs` 和 `van-tab` 组件： ```vue <van-tabs v-model="activeTab"> 标签1"> 标签2"> ...
vant4步骤条的内容在一定高度内进行上下滚动
m0_69722446的博客
05-31 1271
让步骤条的父容器自适应步骤条的高度，从而让步骤条在超出高度时自动出现滚动条。这样就可以让步骤条在不同设备上都能够正常显示，而不会被截断或溢出。后，元素的高度也会变成 200px。如果元素的内容高度发生变化，元素的高度也会自动调整。并不是所有浏览器都支持，特别是在 IE 浏览器中可能会出现兼容性问题。例如，如果一个元素的内容高度为 200px，那么设置。时需要进行兼容性测试，并根据实际情况选择其他方案。在步骤条中，我们可以使用。
vant获取首页以及tab页面数据不重复提交解决方案
NanChen的博客
01-07 1333
vant自带的tab栏这里就不多说了写法如下： <van-tabs v-model="active" swipeable @click="onClick"> <van-tab v-for="(item, index) in list" :key="index" :title="item.name"> </van-tab> </van-tabs> 首先要请求首页数据，因为列表项的数据在首页 this.$axios
Vue 中 touch 事件无效解决方案
Ryan的博客
03-30 3690
添加 .native.prevent 修饰符即可 <van-button round @touchstart.native.prevent="onTouchStart" @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd" > Hold to Talk </van-button>
使用vant 遇到的坑
漫天随飞雪的博客
03-31 3498
1：解决移动端点击输入框input放大 在index.html加入 <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum...
vant datetimepicker 在桌面端无法使用 （桌面端上模拟移动端 touch 事件）
gzyzwx的博客
02-26 1013
原因，vantdatetimepicker 在事件监听上 用了touch事件 解决方案可以使用 https://github.com/hammerjs/touchemulator
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值