IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> taro项目小程序场景下scrollview引发的问题汇总 -> 正文阅读

[移动开发]taro项目小程序场景下scrollview引发的问题汇总

场景一:滑动穿透问题

滑动穿透出现的场景:

<Scrollview scrollY style={height}>
	// 1.使用了AtFloatLayout组件
	// 2.带遮罩层的弹窗
</Scrollview>

出现滑动穿透的原因是,taro 3的事件冒泡机制是单独在小程序逻辑层实现,所有事件都是绑定的bind而不是catch,在touchmove事件回调中调用e.stopPropagation()并不能阻止滑动穿透,只会阻止上层组件的事件回调触发。
而是应该在View组件中添加catchMove属性,只要该属性值为true,就会使用catchTouchmove代替bindTouchmove进行事件绑定,从而阻止滑动穿透。
解决:

<View catchMove>
	<Scrollview scrollY style={height}>
	</Scrollview>
</View>

场景二 更复杂一点的滑动穿透问题

实际项目中使用Scrollview的场景会更复杂,如多层Scrollview嵌套等等。
这里举一个例子,在场景一中,如果最外层的View添加了touch事件,那么仅靠添加catchMove属性是无法阻止滑动穿透的。

<View
	onTouchStart={handleMoveStart}
    onTouchMove={handleMove}
    onTouchEnd={handleEnd}
    catchMove
>
	<ScrollView scrollY style={height}>
		// 带遮罩层的弹窗或AtFloatLayout
	</ScrollView>
</View>

注意,此时就算在外层的View里添加了catchMove,或者将内层的ScrollView的scrollY设置为false,都无法阻止滑动穿透现象。
这里提供两个解决方案:
1.控制外层View的onTouchStart事件,如果带有遮罩层的弹窗出现,则onTouchStart直接返回false,弹窗关闭之后执行原本的逻辑。
2.将带遮罩层的弹窗的代码放在整个View的外面。

<View
	onTouchStart={handleMoveStart}
    onTouchMove={handleMove}
    onTouchEnd={handleEnd}
    catchMove
>
	<ScrollView scrollY style={height}>
		// ...
	</ScrollView>
</View>
// 带遮罩层的弹窗或AtFloatLayout

场景三 使用两层scrollview的情况下,最里层的scrollview下的各种input,textarea的输入框内容发生错位

还原一下场景:

<View catchMove>
	<Scrollview scrollY style={height}> //第一层
		<AtFloatLayout> //第二层,AtFloatLayout有默认Scrollview
			<Input />
			<Textarea />
		</AtFloatLayout>
	</Scrollview>
</View>

看一个效果图:
请添加图片描述
当我们把第一个scrollview的内容往下滚动后,打开AtFloatLayout里的内容,就会发现里面input和textarea中的placeholder和输入内容全部发生了错位,目前这个问题在华为的鸿蒙系统中必现。
关于这个问题的解决可以看一下微信社区,直接将最外层的scrollview的height改为其他值,不能用100vh。
scrollview里的input内容发生错位

实际上这个问题还有一种出现异常的场景:

<View catchMove>
	<Scrollview scrollY style={height}> //第一层
		<AtFloatLayout> //第二层,AtFloatLayout有默认Scrollview
			<Textarea style={height}/> //Textarea指定高度
		</AtFloatLayout>
	</Scrollview>
</View>

在上面的例子中,Textarea有指定的高度,超出高度后Textarea就会自动滚动,这是原以为的情况。
实际上在ios系统中,如果最外层加了catchMove,就会阻止里面Textarea的滑动。但是如果不加最外层的catchMove,就无法阻止滑动穿透问题。
解决方案:将Textarea的height调大点,使其不用滑动,退而求其次的解决方案。。。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-07-20 19:00:48  更:2022-07-20 19:02:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 3:48:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码