微信小程序 使用Vant 的SwipeCell组件时，scroll-view无法滚动页面的解决方案

最新推荐文章于 2024-08-10 14:52:43 发布
最新推荐文章于 2024-08-10 14:52:43 发布
阅读量6.6k 收藏 3
点赞数
分类专栏： 微信小程序 文章标签： vant scroll-view van-swipe-cell 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43156398/article/details/90299550
版权

小程序交流群：609690978

这是vant的一个BUG，解决方式如下：
1.找到swipe-cell的目录，主要修改wxml和js。
2.如下图

wxml部分
js部分
js部分

小程序交流群：609690978

The wind is blowing
关注
专栏目录
微信小程序使用 vant Dialog组件的正确方式
10-15
Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。 首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...
小程序：双向数据绑定、父子传参、上拉加载更多、如何使用vant
weixin_53571388的博客
12-22 1257
1、双向数据绑定 单向绑定语法 1.普通的属性的绑定是单向的。例如： <input value="{{value}}" /> 解析： 如果使用this.setData({ value: 'leaf' })来更新 value ，this.data.value 和输入框的中显示的值都会被更新为leaf； 但如果用户修改了输入框里的值，却不会改变 this.data.value。 双向绑定语法 对应属性前加入model:前缀： <input model:value="{{value}}"
小记--基于vant list组件实现对scroll-view的替换
沙骑马
05-08 300
【代码】小记--基于vant list组件实现对scroll-view的替换。
【Day05】0基础微信小程序入门-学习笔记
最新发布
不被定义的程序媛写的博客儿
08-10 967
小程序基础知识最后一篇
微信小程序的scroll-view不能滚动问题
qq_36356379的博客
03-23 1万+
最近搞了一个多周的微信小程序算是入门了吧，因为之前自学过js和css，所以上手比较快，语法跟VUE挺像的，下面说说期间遇到的一些问题吧。 一、scroll-view没有显示全，但是不能滚动 确定你想实现的滑动方向，检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-vie...
使用vue实现移动端h5的scroll-view
JiangYuXuan1994的博客
11-28 1万+
需求：移动端h5，页面顶部有nav-bar，下部有tab-bar，缺少中间内容盒子，当tab-bar页面切换时，页面滚动位置丢失，导致交互类似页面重新渲染 根据这种需求，就衍生出了scroll-view组件，下面是我结合vant实现的简易的scroll-view 首先是tab集合页 <template> <section> <van-nav-bar...
微信小程序scroll-view组件设置display:flex不生效解决办法
to_prototy的博客
08-29 1549
微信小程序scroll-view组件设置display:flex不生效解决办法
微信小程序使用Vant Weapp组件库的方法步骤
10-16
以上步骤基于微信小程序和 Vant Weapp 组件库的使用流程，为开发者提供了一套完整的引入和使用 Vant Weapp 的方法。这能够帮助开发者快速上手并利用 Vant Weapp 组件库来丰富微信小程序的功能与界面表现，为用户带来...
微信小程序vant弹窗组件的实现方式
10-15
【微信小程序vant弹窗组件的实现方式】 在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...
在微信小程序中使用vant的方法
10-16
在微信小程序中，Vant 是一个非常流行的 UI 组件库，它提供了丰富的界面元素和交互设计，可以帮助开发者快速构建美观且易用的小程序应用。Vant 基于 WeApp，专门为微信小程序优化，旨在提供轻量级、高性能的组件。 ...
vant组件库的SwipeCell组件无法拖动，无法滑动，无样式等问题
xiaobuzq的博客
01-20 1438
如果发现组件没有样式的话，在上方导入对应的样式就可以了，这里导入的是SwipeCell组件样式，同理，发现哪个组件没样式就导入哪个组件的样式就可以了。使用了vant组件库的SwipeCell组件发现无法滑动，如何把浏览器切换成移动端是可以滑动组件的。查阅了资料，发现是pc端和移动的监听事件是不同的，需要下载一个插件才能在pc端使用。打开终端进行安装，我使用的是pnpm包管理工具，按自己使用的包管理工具来安装。然后在pc端就可以拖动和滑动了，这个组件在pc端有点难拖动，多试几次就好了。
微信小程序vant里的SwipeCell导致页面不能滚动
weixin_46124693的博客
01-19 1674
下面是我的页面 可以正常滑动 但是页面不能滚动 原因：是SwipeCell组件的属性禁用了 解决 .van-swipe-cell{ overflow-y:auto !important; overflow-x:hidden !important; }
小程序UI Vant 以SwipeCell为主的列表页，无法滚动页面
S_nooze的博客
04-06 2815
小程序UI Vant 以SwipeCell为主的列表页，无法滚动页面 首先找到组件swipe-cell，需要加点料～
微信小程序: swiper 的 swiper-item 下 scroll-view 无法滚动
热门推荐
soindy
02-14 2万+
微信开发工具 v1.02.1802080 swiper-item 和 scroll-view 及其中间的所有 view 都需要设置 height: 100%; 设置具体初始高度: style="height:{{winHeight}}px" 如果仍然有问题, 需要设置scroll-view的滚动方向 : scroll-x="false" scroll-y="true" 示例代码...
IOS14 微信小程序 scroll-view 不滚动的问题
weixin_41827052的博客
10-27 937
各位其实原因只有一个：找找你的样式里面的包含z-index=’-1’或者小于0的情况，需要改成0，scroll-view 外部的父级div也包括。
【小程序】scrollview制作tab导航栏，点击tab自动滚动到指定位置
要做一条翻身的咸鱼
08-29 1420
scroll-view+swiper制作tab标签页，点击滚动到指定位置
【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】
weixin_44899940的博客
06-29 1259
【scroll-view滑动条】遮挡内容解决方法，【输入框】输入内容顶起页面解决方法，【文本超出隐藏】
scroll-view 实现自定义模块的横向滑动（到屏幕的中间显示）
花花世界的博客
06-30 2559
想要实现的功能是：一个横向的tab栏，点击item的时候，item自动滚动到屏幕的中间展示，有想过用vant的插件库来实现，但是那个不支持自定义内容，所以只好自己实现了。 效果图展示： 代码实现： .wxml <view class="container"> <scroll-view id = "scroll-view" scroll-into-view="{{itemview}}" scroll-x class="scroll-x" scroll-left="{{scrollLef
PC端轮播图支持手动滑动
qq_39652099的博客
06-26 596
PC端轮播图支持手动滑动/鼠标拖动，且可以左右切换。：最开始用的是elementUI的Carousel组件，不支持手动滑动/鼠标拖动，然后改成了Vant的Swipe组件，加上左右箭头，调用Swipe 方法prev()、next()：由于vant是移动端的组件库，对pc端会有兼容性问题，例如Swipe，移动端是@touch，该组件做了相应的监听，而PC端是@mouse，没有做对应的监听，因此在pc端无法用鼠标拖动图片。终端输入npm i @vant/touch-emulator --save然后在。
微信小程序中vant组件库van-search进入页面自动获取焦点具体代码
04-23
抱歉，我作为AI语言模型并不能直接提供代码，但是我可以为您提供一些思路。可以在 van-search 组件的 mounted 钩子中使用 $nextTick() 方法，将焦点转移到输入框上。 具体代码示例： ``` <template> <van-search v-model="keyword" placeholder="搜索" /> </template> <script> export default { data() { return { keyword: '' }; }, mounted() { this.$nextTick(() => { const input = document.querySelector('.van-search__input'); input.focus(); }); } }; </script> ``` 需要注意的是，使用 document.querySelector('.van-search__input') 获取输入框时，可能需要根据实际情况对 class 名进行修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值