1***@qq.com
1***@qq.com
  • 发布:2021-11-22 15:13
  • 更新:2021-11-22 15:40
  • 阅读:358

【报Bug】scroll-view组件的scroll-top属性在使用滚动到底部之后,手动滚动页面之后再次操作不会再滚回底部

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7

HBuilderX类型: 正式

HBuilderX版本号: 3.2.15

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

基础库版本号: 2.21.0

项目创建方式: HBuilderX

示例代码:
               <scroll-view   
            scroll-y="true"   
            class="chat-scroll"  
            :scroll-top="scrollTop"  
            :scroll-with-animation="true"  
            @scroll="fnScroll"  
        >  
            <view class="chat-msg-list">  
                <view class="chat-msg-ctn">  
                    <view class="msg-ctn flex-r-e" v-for="item in msgList">  
                        <view class="msg-content-ctn msg-self">  
                            <view class="msg-content self-content">123</view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </scroll-view>  
               <view class="consult-finish-ctn" @click="fnFinish">结束</view>  
export default {  
        onLoad(){  

        },  
        data(){  
            return{  
                scrollTop:0,  
                msgList:5  
            }  
        },  
        methods:{  
            fnGetMsgHeight(){  
                let query = uni.createSelectorQuery();  
                query.select('.chat-msg-list').boundingClientRect(res => {  
                  let height = res.height  
                  this.scrollTop = height  
                }).exec();  
            },  
            fnFinish(){  
                                this.msgList = 20  
                this.fnGetMsgHeight()  
            }  
        }  
    }  
.chat-scroll{  
        width:100%;  
        height: calc(100vh - 402rpx);  
        margin-top: 290rpx;  
        .chat-msg-list{  
            width:100%;  
            .chat-msg-ctn{  
                width:100%;  
                padding:0 40rpx;  
                .msg-ctn{  
                    width:100%;  
                    margin-bottom: 30rpx;  
                    .msg-content-ctn{  
                        max-width:466rpx;  
                        padding:23rpx;  
                        border-radius: 12rpx;  
                        position: relative;  
                        .msg-content{  
                            font-size: 30rpx;  
                            line-height: 36rpx  
                        }  
                        .self-content{  
                            color:#fff  
                        }  
                        .friend-content{  
                            color:#333  
                        }  

                    }  
                    .msg-self{  
                        background: #4166F7;  
                        margin-right: 30rpx;  
                    }  
                    .msg-friend{  
                        background: #fff;  
                        margin-left: 30rpx;  
                    }  

                }  
            }  
        }  
    }  
    .consult-finish-ctn{  
        width: 108rpx;  
        height: 108rpx;  
        background: #7590F9;  
        border-radius: 50%;  
        position: fixed;  
        right:30rpx;  
        bottom:187rpx;  
        text-align: center;  
        line-height: 108rpx;  
        color: #fff;  
        font-size: 30rpx;  
    }  

操作步骤:

先点击结束按钮,会滚动到页面底部,手动将页面滚回顶部,再次点击结束按钮,页面无法再滚动到最底部

预期结果:

预期结果,手动滚回顶部后,再次点击结束按钮扔能滚动到最底部(小程序官方语言是可以实现)

实际结果:

手动滚回顶部后,再次点击结束按钮无法实现滚动

bug描述:

scroll-view组件的scroll-top属性在使用滚动到底部之后,元素高度没有改变,手动将页面滚回顶部,再次用事件触发滚动到底部不生效

2021-11-22 15:13 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

vue 的观测限制,看下 scroll-view 文档也有说明和解决方案。

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