直接运行点击打开popup即可复现
![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/43/24/37_avatar_mid.jpg?v=0)
- 发布:2022-05-18 10:58
- 更新:2022-06-01 15:14
- 阅读:2830
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10专业版 21H1
HBuilderX类型: 正式
HBuilderX版本号: 3.4.7
第三方开发者工具版本号: 1.05.2204050
基础库版本号: 2.24.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
看代码
看代码
预期结果:
看代码
看代码
实际结果:
看代码
看代码

<!-- grid-tree.vue -->
<view>
<uni-popup ref="popup" type="bottom" @maskClick="maskClickFn"
@touchmove.stop.prevent @close="show = false">
<uni-transition modeClass="slide-bottom" :styles="{
height: '60vh',
width: '100%'
}" :show="show">
<view class="popup-content">
<view class="u-flex popup-title">
<view class="u-font-28 btn cancel-btn" @click="canenlBtnFn">取消</view>
<view class="u-flex-1 u-font-32">{{title}}</view>
<view class="u-font-28 btn confirm-btn" @click="confirmBtnFn">确定</view>
</view>
<view class="tree-content">
<scroll-view scroll-y scroll-x style="width: 100%;height: 100%;white-space: nowrap;">
<!-- TODO 内容 -->
</scroll-view>
</view>
</view>
</uni-transition>
</uni-popup>
</view>
@touchmove.stop.prevent
导致不能滚动的根本原因
其次,为什么要在 uni-popup 里套一个 uni-transition ?

https://uniapp.dcloud.io/component/uniui/uni-popup.html#%E7%A6%81%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F
看下这个是否对你有帮助

<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<!-- <text
class="text">popup 内容</text> -->
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
</uni-popup>
我的再快手小程序中也无法滚动,但是微信何字节能正常滚动
[已删除] (作者)
因为不嵌套uni-transition根本就没动画,其次,@touchmove.stop.prevent在app上是可以的,就是为了防止滚动穿透
2022-05-19 09:02
[已删除] (作者)
并且去掉uni-transition给.popup-content设置高度也不能滚动
2022-05-19 09:04
[已删除] (作者)
@touchmove.stop.prevent 是这个的锅,但是为啥app上有用
2022-05-19 09:08
DCloud_UNI_HT
回复 [已删除]: 使用 @touchmove.stop.prevent 就会导致所有元素都无法滚动
2022-05-20 09:53
DCloud_UNI_HT
回复 [已删除]: uni-popup 本来就有动画
2022-05-20 09:53
[已删除] (作者)
回复 DCloud_UNI_HT: 但是我把uni-transition去掉就没有动画
2022-05-20 11:42