taro-ui 3.0.0-alpha.3 浮窗组件 AtFloatLayout 在微信小程序里页面过长的情况下滚动穿透了

[Laev]

Taro UI 版本信息

v2.3.4

问题描述

我在ui库源码中看到了对于组件的处理，有绑定onTouchMove函数阻止冒泡，但是编译后在真机调试时在开启AtFloatLayout的情况下并没有阻止页面滚动

复现步骤

1. git clone https://github.com/Laev/taro-demo.git
2. cd taro-demo
3. npm i
4. npm run dev:weapp

复现代码

https://github.com/Laev/taro-demo/blob/master/src/pages/index/index.tsx

报错信息

无

系统信息

👽 Taro v3.0.9

Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db

Taro CLI 3.0.9 environment info: System: OS: macOS 10.15.3 Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.18.0 - ~/.nvm/versions/node/v10.18.0/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v10.18.0/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v10.18.0/bin/npm npmPackages: @tarojs/components: 3.0.9 => 3.0.9 @tarojs/mini-runner: 3.0.9 => 3.0.9 @tarojs/react: 3.0.9 => 3.0.9 @tarojs/runtime: 3.0.9 => 3.0.9 @tarojs/taro: 3.0.9 => 3.0.9 @tarojs/webpack-runner: 3.0.9 => 3.0.9 babel-preset-taro: 3.0.9 => 3.0.9 eslint-config-taro: 3.0.9 => 3.0.9 react: ^16.10.0 => 16.13.1 taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3

补充信息

1. 复现机型是iphoneX ios12.4.1 微信最新版本
2. 小程序原生提供的解决方法应该是catchtouchmove事件，但是我跑demo的时候编译后发现class="at-float-layout"这个元素上没有创建catchtouchmove
3. h5的解决方案里是给body加上"at-frozen"类，在仓库里这个类写在app.scss里，而没有编译进包里，所以开发者需要自己补充这个类才能正常解决h5下的穿透问题

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[oodzchen]

我用的是taro-ui 2.2.2 也遇到了，有的页面直接显示了placeholder文字，点击会触发手机键盘

[u10k]

同样遇到 显示placeholder文字，点击会触发手机键盘

系统信息 Taro CLI 3.0.8 environment info: System: OS: macOS 10.15.5 Shell: 5.7.1 - /bin/zsh Binaries: Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node Yarn: 1.17.3 - ~/.nvm/versions/node/v11.15.0/bin/yarn npm: 6.10.2 - ~/.nvm/versions/node/v11.15.0/bin/npm npmPackages: @tarojs/components: 3.0.8 => 3.0.8 @tarojs/mini-runner: 3.0.8 => 3.0.8 @tarojs/react: 3.0.8 => 3.0.8 @tarojs/runtime: 3.0.8 => 3.0.8 @tarojs/taro: 3.0.8 => 3.0.8 @tarojs/webpack-runner: 3.0.8 => 3.0.8 babel-preset-taro: 3.0.8 => 3.0.8 eslint-config-taro: 3.0.8 => 3.0.8 react: ^16.10.0 => 16.13.1 taro-ui: ^3.0.0-alpha.2 => 3.0.0-alpha.2 npmGlobalPackages: typescript: 3.5.3

• Taro 版本 [3.0.8]
• Taro UI 版本 [3.0.0-alpha.2]
• 报错平台 [weapp]

[u10k]

我用的是taro-ui 2.2.2 也遇到了，有的页面直接显示了placeholder文字，点击会触发手机键盘

我的临时解决办法是AtFloatLayout中的表单根据layout的isOpened来控制表单的显示隐藏

[349989153]

@oodzchen 你说的这个是小程序的textarea的问题吧，别搞错对象。

https://developers.weixin.qq.com/community/develop/doc/0000025a7982489ba546eb93d51c00

[oodzchen]

@oodzchen 你说的这个是小程序的textarea的问题吧，别搞错对象。

https://developers.weixin.qq.com/community/develop/doc/0000025a7982489ba546eb93d51c00

不是，我用的是taro-ui的AtInput组件。

已经解决了。我给AtFloatLayout的内容包裹了一层View，当浮窗不显示的时候我直接把内容给隐藏就行了。

[zmm2tysu]

歪楼了啊...楼主说的是弹出时的滚动穿透

[wangming18]

3.0.0-alpha.3同样遇到了滚动穿透，在页面过长的时候异常，微信小程序平台

[qiaolin-pan]

这都1年多了，还没解决吗