uniapp scrollview 滚动最新位置

uniapp

效果是模拟发送聊天信息，需要scrollview在收到新消息时滚动到底部最新的位置

项目是vue2的，代码如下

scrollToBottom(selector) {
    this.$nextTick(() => {
       const dom = uni.createSelectorQuery().in(this).select(selector)
        dom.boundingClientRect(({height}) => {
            dom.scrollOffset(({scrollHeight}) => {
                // 这个this.scrollTop 是data中的变量 控制srcollView的滚动距离 
                this.scrollTop = scrollHeight - height
            }).exec()
        }).exec()
    })
}

使用时直接传入scrollview的选择器即可

使用示例

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y charRecord">
    
scroll-view>

onFetchMessage(){
	// 接收到信息 放入列表
	this.scrollToBottom('.charRecord') // .charRecord 是 scroll-view 的类名 
}

如果恰好你需要隐藏scrollview的滚动条，那就可以加上这个代码

在App.vue中添加

<style lang="scss">
    /*每个页面公共css */
    scroll-view ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }

    ::-webkit-scrollbar {
        display: none;
    }
style>