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

【报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>

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

该问题目前已经被锁定, 无法添加新回复