【前端】van-tab 的animated属性与van-action-sheet的滑动动画会冲突导致van-action-sheet显示异常

最新推荐文章于 2025-03-17 21:51:39 发布
最新推荐文章于 2025-03-17 21:51:39 发布
阅读量1.9k 收藏 1
点赞数 1
文章标签： 动画 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sharkrubbish/article/details/124721998
版权
博主在黑马头条分享，发现vant库中的van-tab组件使用animated属性时，与van-action-sheet的滑动动画产生冲突，导致后者显示异常。同时，切换导航时action-sheet动画失效，仅初始页面有效。解决方法及底层原理值得开发者关注。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

博主在黑马头条的小项目中，发现了vant3一个小缺陷

如题所示：
van-tab 的animated属性与子组件中调用的van-action-sheet的滑动动画会冲突导致van-action-sheet显示异常。并且切换导航中不同页面时，van-action-sheet的动画不出现，只在默认页有效果。

正常使用van-action-sheet时，显示效果如下：
在这里插入图片描述

当van-tab添加animated属性时，使用van-action-sheet时显示效果如下：
在这里插入图片描述

铁甲小马_
关注
van-action-sheet 放在form表单中，选中后自动提交
qq_846784996的博客
01-18 5314
解决方案： 增加 form 提交 element-form @submit.native.prevent <el-form @submit.native.prevent> <van-button type="info" @click="showActionSheet">弹出菜单</van-button> <van-actio...
animated-tab-bar:带有HTML，CSS和Javascript想法的动态标签栏
04-29
"animated-tab-bar"项目正是这样一个实现，它利用HTML、CSS和JavaScript这三种核心技术，为用户提供了富有创意的动画效果。下面将详细介绍这些技术以及它们在动态标签栏中的应用。 首先，HTML（超文本标记语言）是...
微信小程序（二十二）action-sheet组件详细介绍
09-01
主要介绍了微信小程序action-sheet组件详细介绍的相关资料,需要的朋友可以参考下
移动端Vant action-sheet 无法滚动
程序员的专栏
07-24 1029
vant action-sheet 无法滚动
解决van-action-sheet弹窗无法显示
最新发布
xiaozhouwa的博客
03-17 340
组件，在 Vue 3 中，v-model 的语法是 v-model:show，而不是 v-model（这是组件库内部定义的，在迁移时需要关注其用法的不同）在vue2中需要把数据定义在data中才是响应式，在vue3中则需要使用ref/reactive支持响应式。也可以动态检查DOM元素在开发者工具的 Console选项卡中，输入以下代码检查。4、检查 van-action-sheet 的 DOM 元素是否存在。5、vue2向vue3迁移过程中要关注组件库的不同用法。是否存在，如果返回 null，说明。
vant中van-tabs使用中的小问题
weixin_44224712的博客
05-09 2168
van-tabs 不要默认选中
【Vant Weapp】van-action-sheet 动作面板
joanmelon的博客
01-24 6774
触发的地方展示的弹窗cancel-text="取消"/>.title {}data:{list: [{name: '周',id: 0},{name: '月',id: 1},{name: '季',id: 2},{name: '年',id: 3}],active:0,activeName:'周',}onOpen() {},},})// 选择结束后获取列表},
react-native-scrollable-tab-view：可以在之间滑动的选项卡式导航，每个选项卡可以具有自己的ScrollView，并在滑动之间保持自己的滚动位置。 令人愉快的动画。 可自定义的标签栏
02-05
react-native-scrollable-tab-view 这可能是我在Android上最喜欢的导航模式，但愿它在iOS上更常见！ 这是React Native的非常简单的纯JavaScript实现。 有关此动画背后的工作原理的更多信息，请查看《 反弹”部分。 ...
animated-number-react:使用 React 为数字设置动画的超级简单方法
08-05
$ npm install animated-number-react # OR $ yarn add animated-number-react import AnimatedNumber from "animated-number-react" ; export default class App extends Component { state = { value : 150 , ...
react-native-raw-bottom-sheet：根据需要将自己的组件添加到底部表中（Android和iOS）
02-05
react-native-raw-bottom-sheet 超轻量级组件 将您自己的组件添加到底表 自定义您喜欢的任何内容 支持向下拖动手势 支持所有方向 同时支持Android和iOS 流畅的动画 零配置 零依赖 热门搜索排名（本机底页） 展示...
react-native-animated-ruler:可定制的动画标尺，用于React本机
05-17
React本机动画规则 预习 安装 包管理器 命令 纱 yarn add react-native-animated-ruler npm npm i --save react-native-animated-ruler 用法 import Ruler from &#39;react-native-animated-ruler&#39; ; ...
vue 集成高德地图，点击图标，弹出van-action-sheet，一闪而过的问题探究
jifashihan的博客
11-07 838
后来和公司前端大佬交流，找到了问题，地图图标点击的时候，会刷新地图，van-action-sheet刚弹出来，地图刷新了，van-action-sheet就消失了，所以才出现一闪而过，这样就好解决了，在点击事件里边，加一个延时，刷新完了，在弹出对话框。地图图标点击，然后呢，设置sheetShow 为true，弹出van-action-sheet，逻辑上是没错的，我把这个代码放在地图外的控件，是可以正确弹出对话框的，然后在浏览器模式下，是正常能弹出的，切换成手机模式，又不能弹出。
vantWeapp使用动作面板(van-action-sheet)时数组动态添加编辑数据
zhudingfengshen的博客
12-11 3799
项目背景：在实现如下功能时，我们想要实现点击电话按钮实现弹出电话号码面板并点击拨打电话。但是后台返回的电话号码数据并不是数组，因为我们要对data值进行动态添加。 数据格式 对应代码 <van-action-sheet show="{{ show }}" actions="{{ actions }}" cancel-text="取消" bind:cancel="onClose" bind:close="onClose" bind:select="onSelect" /> dat
vant ActionSheet动作面板之一级面板和二级面板
weixin_57246351的博客
08-08 1763
vant ActionSheet动作面板之一级面板和二级面板 main.js导入组件 import { ActionSheet } from 'vant'; Vue.use(ActionSheet); 组件内 <template> <div> <button @click="show1=true">点我有惊喜</button> <!-- 一级反馈面板 --> <!-- get-container="b
vant使用van-list不能上下滚动，滑动无效的解决？
m0_61663332的博客
01-13 5117
vant使用van-list不能上下滚动，vant组件的list不能上下滑动
Android ActionSheet动画效果实现
心砚THU的专栏
01-01 4254
今天需要在项目中使用到类似iOS ActionSheet的动画效果，在查阅了一些资料后，顺利实现了，在这里把方法分享给大家。
vue 简单的tab切换滑动效果
Z.Dragon 的博客
08-14 3447
实现一个简单的滑动效果： 代码逻辑比较简单，利用css的transform和transition属性实现简单的tab切换效果 贴上代码，仅供参考： html部分： <template> <div class="container"> <div class="flex_c"> <p style="margin-right:20px;" @click="tab('0')">切换</p>
vant下拉组件在van-tabs时出现无下拉数据
qq_42749712的博客
09-25 700
因为van-tabs的animated属性影响 去掉即可 或者在van-dropdown-item上添加get-container="body"属性。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值