- 发布：2020-07-02 17:45
- 更新：2022-01-06 15:38
- 阅读：727
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： MacOS 10.15.4
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： 全部
手机厂商： 苹果
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<view class="home">
<scroll-view class="left" scroll-y>
<view class="item" v-for="i in 10" :key="i">{{i}}</view>
</scroll-view>
<scroll-view class="right" scroll-y>
<view class="item" v-for="i in 50" :key="i">{{i}}</view>
</scroll-view>
</view>
</template>
<style>
.left, .right {
position: fixed;top: 0;bottom: 0;overflow-y: auto;
}
.left {
left: 0;width: 100px;
}
.right {
right: 0;width: calc(100% - 100px);
}
.item {
text-align: center;background: #f0f0f0;border: 1px solid #fff;height: 40px;line-height: 40px;
}
</style>
<template>
<view class="home">
<scroll-view class="left" scroll-y>
<view class="item" v-for="i in 10" :key="i">{{i}}</view>
</scroll-view>
<scroll-view class="right" scroll-y>
<view class="item" v-for="i in 50" :key="i">{{i}}</view>
</scroll-view>
</view>
</template>
<style>
.left, .right {
position: fixed;top: 0;bottom: 0;overflow-y: auto;
}
.left {
left: 0;width: 100px;
}
.right {
right: 0;width: calc(100% - 100px);
}
.item {
text-align: center;background: #f0f0f0;border: 1px solid #fff;height: 40px;line-height: 40px;
}
</style>操作步骤：
手指在两个区域之间滑动，则有很大几率触发，几率目测超过20%，甚至更高。
手指在两个区域之间滑动，则有很大几率触发，几率目测超过20%，甚至更高。
预期结果：
当手指重新点击滑动区域并开始滑动，不要卡死，可以流畅滑动。
当手指重新点击滑动区域并开始滑动，不要卡死，可以流畅滑动。
实际结果：
偶先两个滑动区域均卡死的情况，不能继续滑动，只能切换到其他页面再回来，才能继续滑动。
偶先两个滑动区域均卡死的情况，不能继续滑动，只能切换到其他页面再回来，才能继续滑动。
bug描述：
页面构建两个 scroll-view 区域，左右布局，都是上下滑动。单手指各自触摸单独区域都是正常的。
但是，当手指跨区域滑动的时候，偶先两个区域都卡死不能继续滑动。
尤其是当某个区域内的高度，不足以撑开滑动的时候，这种现象就格外出现得多。
包含安卓APP，IOSAPP和微信小程序，均存在这个问题。
1 个回复
2***@qq.com
需要在scroll-view 里面再放一层view
像这样
<scroll-view class="left" scroll-y>
<view>
<view class="item" v-for="i in 10" :key="i">{{i}}</view>
</view>
</scroll-view>