Taro阻止滚动穿透

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量678 收藏
点赞数
文章标签： taro 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namechenfl/article/details/131769029
版权

catchMove
Taro 3.0.21 版本开始支持
但是地图组件本身就是可以滚动的，即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。

需要真机预览或者体验版查看，模拟器上看不出效果。

在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容

<View catchMove></View>

针对taroUI提供的弹框组件效果很好，弹框不需要滚动直接使用，需要滚动的内部写scroll-view

岁月如歌_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Taro引入echarts【兼容多端小程序（飞书/微信/支付宝小程序）】
weixin_44314609的博客
04-27 118
在开发项目中，components中创建Echarts文件，放入下载后的js包，并在该目录下创建wx-canvas.js，编写canvas构造函数代码，如下。在Echarts文件中，创建ec-canvas.vue文件，创建canvas对象。最后，需要进行各种各样的渲染与修改，可直接参看。希望此文对大家有帮助，也请大佬不吝赐教～
taro项目taro项目taro项目taro项目taro项目taro项目taro项目
07-07
taro项目taro项目taro项目taro项目taro项目taro项目taro项目
解决Taro在支付宝小程序中阻止滚动穿透的问题，钉钉小程序阻止滚动穿透
m0_57261384的博客
11-23 590
问题描述：在支付宝小程序真机预览中，使用 Picker 选择器的时候，滑动其中的滚动项，因为冒泡事件的原因会触发外层盒子的滚动，试过阻止冒泡事件，没用，样式阻止外层滚动也没用
taro兼容h5之坑--taroUiVue3组件在h5中不显示
hanchengmei的博客
05-04 1748
项目：taro3+vue3+taroUiVue3 问题描述 taroUiVue3组件在浏览器中不显示，如下： 解决方法 可以按照node_modules/taro-ui-vue3/README.md的步骤 1、config文件夹中添加h5-building-script.js const path = require('path') const fs = require('fs') const distH5Vue3IndexPath = path.resolve(__dirname, '../node_
【Taro】picker滚动触发页面下拉刷新解决过程
m0_67182331的博客
12-10 648
自己封装的picker 滚轮滚动时 手指往上滑动一切正常 丝滑无比，往下这回触发下拉灰色背景，具体场景涉及项目，不提供展示，如遇到相同场景就一定能懂。先是分析是ios端的问题导致的，但是在安卓系统的手机也会有bug虽然情况不同 应该不是系统的问题。好家伙，真的有用，但是随之来的副作用是整个应用的页面均无法实现下拉刷新，这肯定不可取。然后转换思路，查找了页面的配置文件，禁止刷新，找到一个要局配置的。~~至此，记录下踩坑道路上的又一个令人头疼的坑🐸。就完美的解决了这个问题~~
微信小程序开发--uniapp
mzc的博客
10-10 4752
uniapp介绍 什么是uniapp uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 截止2020年8月份，uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序 10个平台。 移动端跨平台技术发展史 随着互联网的逐渐发展，互联网公司越来越多，原生的移动端存在无法
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
Embrace924的博客
02-22 2400
Taro3.x 容易踩坑的点（阻止滚动穿透，弹框蒙层父级定位）
小程序弹框遮罩禁止页面滚动
qq_41896605的博客
11-19 565
小程序弹框遮罩禁止页面滚动 弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。 解决方法： 给当前遮罩加catchtouchmove="ture"属性 <view class="modal-view" style="z-index:999;" bindtap="toggleModal" catchtouchmove="true"> 在电脑上测试是没有用的，这是触摸事件。因此，需要在手机端测试，预览生成一个开发版，用手机微信扫描即可看到效果。 ...
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
weixin_50248346的博客
11-17 3578
一、问题描述 最近用tarojs在做一个小程序项目时，首页需要禁止下拉刷新，于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新，这段话确实禁止了下拉刷新，无论是安卓手机端还是苹果端，但是在苹果端却出现了一个问题，整个页面虽然不能下拉刷新了，但是依然还可以下拉。视觉交互不允许我这么做， 二、解决方法 1、简单粗暴直接禁止页面的滚动，只需要在page.json里加上 disableScroll:true 注意这个属性只能单独加在需
View 的滑动原理和实现方式
任雪龙的博客
07-05 499
开发中，为了增加更多炫丽的效果，我们经常在应用中添加滑动效果，今天就来分析一下 View 中滑动效果的实现原理以及几种常见的实现方式。一、滑动原理1. Android 中的坐标系在 View 基础 中我们提到了 View 中的 X、Y、mLeft、mTop… 等属性，其中这些属性的值都是相对坐标系来说的，Android 中有两种坐标系，这里一一来简单说一下Android 坐标系： 以屏幕左上角为坐标
移动端怎样解决弹窗后滑动穿透的问题
weixin_40425322的博客
07-15 640
移动端滑动穿透
taro-list:Taro 列表滚动组件
04-16
taro-list 支持下拉刷新 、 加载更多 、虚拟列表 安装及使用 npm i taro-list 小程序 demo 配置文件里添加 copy: { patterns: [ { from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs', to...
一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架
06-19
typescript+eslint+redux+taro+react-native+mock taro适配Android、iOS、微信小程序、H5最佳实践,主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化...
京东Taro框架深度实践
02-24
Taro是凹凸实验室遵循React语法规范的多端开发方案，Taro目前已对外开源一段时间，受到了前端开发者的广泛欢迎和关注。截止目前star数已经突破11.2k，还在开启的Issues达200多个，已经关闭700多个，可见使用并参与...
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 443
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 620
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 656
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 415
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
WebSocket 快速入门 - springboo聊天功能
m0_56308072的博客
04-21 911
HTTP和WebSocket都是啥？
taro框架 禁止页面滚动
05-25
如果你想在 Taro 框架中禁止页面滚动，可以使用 CSS 样式来实现。下面是一些示例代码： ```css body { overflow: hidden; } ``` 这会将页面的滚动条隐藏起来，防止用户滚动页面。 如果你只想禁止某个特定的组件...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值