vue3+ts+vant项目，实现可滑动的van-tabs+swiper的结合使用，如何在滑动swiper的图片时，禁止tabs滑动

最新推荐文章于 2024-06-01 11:50:53 发布

l_sss2019

最新推荐文章于 2024-06-01 11:50:53 发布

阅读量757

点赞数

文章标签： vue.js 前端 typescript sass

本文链接：https://blog.csdn.net/l_sss2019/article/details/133317578

版权

vue3+ts+vant项目，实现可滑动的van-tabs+swiper的结合使用，如何在滑动swiper的图片时，禁止tabs滑动

一个项目要求van-tabs可以滑动切换,van-tabs里嵌套swiper轮播图，这时出现一个问题，当滑动swiper的时候，tabs也会跟着切换

使用@touchstart和@touchend事件来禁止tabs的滑动。在swiper组件上添加@touchstart.stop和@touchend.stop事件，阻止事件冒泡到van-tabs组件。示例代码如下：

 <van-tabs v-model:active="active" animated sticky>  
    <van-tab title="1">  
      <swiper @touchstart.stop @touchend.stop>  
        <!-- swiper content -->  
      </swiper>  
    </van-tab>  
   
  </van-tabs>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

l_sss2019

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3+ts+vant项目，实现可滑动的van-tabs+swiper的结合使用，如何在滑动swiper的图片时，禁止tabs滑动

vue3+ts+vant项目，实现可滑动的van-tabs+swiper的结合使用，如何在滑动swiper时，禁止tabs滑动
复制链接

扫一扫

vue3+vite2+ts+vant3 项目demo

04-16

此项目按照大佬文章一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

05-12

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...

参与评论您还未登录，请先登录后发表或查看评论

h5滚动时侧滑出现_H5使用Swiper过程中遇到的滑动冲突

weixin_39591720的博客

12-20

545

一、问题(1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动，点击左键按着也是拖不动(2)手机端浏览H5手指不能滑动页面，导致很多页面下面的文字看不到二、解决问题1.下面分先说css的问题，主要排查overflow：hidden；检查也有一定的顺序，检查超出高度的标签是否用了overflow：hidden；最好先检查html或body是不是加了height：100%；overflow：hidden...

swiper、vant组件的基本使用方式以及$nextTick()的使用

m0_63851202的博客

01-26

2961

swiper swiper是轮播图插件 swiper的安装 npm i swiper@5.4.5 --save ps：(生产依赖是要放在服务器上的) swiper官网Swiper演示 - Swiper中文网收录了Swiper的40多个在线示例（swiper demos），Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。https://www...

vue3中使用vant4X的van-tabs组件踩的坑

最新发布

m0_50029226的博客

06-01

335

vant之van-tabs的使用

vant-tab 切换不同的tab，页面滚动一致

u014105739的博客

11-03

1364

再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离，点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。

vant swipe点击切换

qq_58209531的博客

04-24

1537

<van-swipe ref="swiper"> <van-swipe-item v-for="item in a" :key="item.id"> </van-swipe-item> </van-swipe> <div data-index="0" @click="onChange">勤奋榜</div> <div data-index="1" @click="onChange">进步榜</div&.

vue+swiper+echarts 循环轮播时第一个图表有时不显示以及禁止swiper在图表中滑动

m0_46074266的博客

12-27

770

复制得来的echarts（第一个和最后一个, 使用其所复制的那个echarts来执行其setOption方法。原因：swiper的loop设置为true了，会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。，想鼠标滑动平移图表的内容，会直接切换slide,而且图表的图例点击无反应，，使该slide无法拖动。复制出来的slide导致原本设置的echarts的id不在是唯一的。使用echarts的图表是被封装过的组件，处理起来比较麻烦。

【vue3 vant 踩坑记录】

xh1506101064的博客

06-24

1408

起因：tab的active默认值为0，路由跳转到界面的值为2，使用的是setup语法糖，获取路由传参值之后，赋值给active，但是，发现active，没有被改变。我们可以发现这个值是已经修改成功了的，但是视图并没有跟着变化，在视图中 active 的值依旧为0。以为是没有及时更新，但是使用的是ref应该不会存在这种情况。后来无意间调用了一下Tab的change事件，发现组件创建时，调用了tab的change事件，并且是最后才调用的。下面是我调用change是事件的代码，可以看出active 改为2之后，

课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip

11-19

课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+...

vue3+vite+ts 仿淘宝放大镜效果

09-17

在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...

在vue3+ts+setup语法糖中使用图片预览组件

09-14

本教程将详细讲解如何在Vue3项目中结合TypeScript和`setup`语法糖实现图片预览功能。首先，让我们了解Vue3的核心变化。Vue3引入了Composition API，它允许开发者更灵活地组织和重用组件逻辑。`setup`函数是...

vue2+vant+H5轮播图中间大两边小的效果

Jolly_zhang的博客

12-08

924

vue2+vant+H5轮播图中间大两边小的效果

使用swipe组件，切换图片时出现闪烁

superYe7的博客

07-12

1028

解决方案：父元素上增加样式style="transform:translate3d(0,0,0);overflow:hidden;" 子元素增加样式style="max-height:100%;max-width:100%;transform:translate3d(0,0,0)" <van-swipe :show-indicators="false" :loop="false" ref="swipeImg" :stop-propagation="false" style="t...

PC端轮播图支持手动滑动

qq_39652099的博客

06-26

522

PC端轮播图支持手动滑动/鼠标拖动，且可以左右切换。：最开始用的是elementUI的Carousel组件，不支持手动滑动/鼠标拖动，然后改成了Vant的Swipe组件，加上左右箭头，调用Swipe 方法prev()、next()：由于vant是移动端的组件库，对pc端会有兼容性问题，例如Swipe，移动端是@touch，该组件做了相应的监听，而PC端是@mouse，没有做对应的监听，因此在pc端无法用鼠标拖动图片。终端输入npm i @vant/touch-emulator --save然后在。

在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件

做笔记\记录遇到的程序bug

11-01

3375

在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不匹配的问题、同时将轮播图抽离出为一个公共组件

van-swipe 组件无法轮播

yao0924的博客

12-16

350

van-swipe 组件无法轮播

vant中的swipe

HarryHY的博客

11-21

7942

我是在Vue中使用的vant 会做一点点小改动 <van-swipe @change="onChange" ref="swiper"> <van-swipe-item v-for="(item,index,key) in List" :key="index"> </van-swipe-item> </van-swipe> 通过onChang...

vant ui tab标签页，页面跳转滚动相互受影响，滚动距离与上一个浏览的页面同步

一蓑烟雨任平生的博客

02-26

2543

问题描述： vant ui tab标签页，滚动相互受影响，滚动距离上一个浏览的页面同步分析个篮子，碰到这种框架的事解决方案：在代码里 <van-tabs v-model="activeName" sticky>  <van-tab title="标签 1" name="a">内容 1</van-tab> <van-tab title="标签 2" name=

vue3 + ts +vant 中的van-list如何实现滚动到底部加载下一页数据

05-19

要实现滚动到底部加载下一页数据，可以使用 `van-list` 中的 `@scroll.native` 事件来监听滚动事件，然后通过计算列表高度和滚动高度来判断是否滚动到了底部。具体实现步骤如下： 1. 给 `van-list` 组件添加 `ref` 属性，用于获取组件实例。 ```html <van-list ref="list" :finished="isFinished" :loading="isLoading" @load="onLoad"> ... </van-list> ``` 2. 在 `mounted` 钩子函数中，获取 `van-list` 组件实例，并给 `window` 对象添加 `scroll` 事件监听器。 ```typescript import { defineComponent, onMounted, ref } from 'vue'; import { List } from 'vant'; export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { // 滚动到底部，触发加载更多 } }); }); return { listRef, }; }, }); ``` 3. 在 `@load` 事件中，将 `isFinished` 和 `isLoading` 属性设置为 `true` 和 `false`，表示数据已经加载完成或正在加载中。 ```typescript export default defineComponent({ components: { VanList }, setup() { const listRef = ref(null); const isFinished = ref(false); const isLoading = ref(false); const onLoad = () => { if (!isFinished.value && !isLoading.value) { isLoading.value = true; // 发送网络请求，获取下一页数据 // 请求成功后，将 isLoading 设置为 false，表示加载完成 } }; onMounted(() => { const listInstance = listRef.value.$el; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight && listInstance.offsetHeight) { onLoad(); } }); }); return { listRef, isFinished, isLoading, onLoad, }; }, }); ``` 这样，当滚动到底部时，就会触发 `onLoad` 方法，从而加载下一页数据。需要注意的是，在数据全部加载完成后，需要将 `isFinished` 设置为 `true`，以防止重复加载数据。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交