[已删除]
[已删除]
  • 发布:2022-05-18 10:58
  • 更新:2022-06-01 15:14
  • 阅读:1919

【报Bug】uni-popup中scroll-view在微信小程序上无法滚动,在App上可以滚动

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10专业版 21H1

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

第三方开发者工具版本号: 1.05.2204050

基础库版本号: 2.24.2

项目创建方式: HBuilderX

示例代码:

直接运行点击打开popup即可复现

操作步骤:

看代码

预期结果:

看代码

实际结果:

看代码

bug描述:

uni-popup中使用scroll-view内容无法滚动,真机也无法滚动,不过在模拟器上可以使用滚轮滚动,但是放在页面上可以滚动

2022-05-18 10:58 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

<!-- 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 ?

  • [已删除] (作者)

    因为不嵌套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

DCloud_UNI_HT

DCloud_UNI_HT

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>

我的再快手小程序中也无法滚动,但是微信何字节能正常滚动

要回复问题请先登录注册