uniapp scrollview 滚动最新位置_uni-app scroll-view获取滚动条位置

uniapp

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

项目是vue2的，代码如下

// 第一种 高度固定值
scrollToBottom(selector) {
    this.$nextTick(() => {
       const dom = uni.createSelectorQuery().in(this).select(selector)
         dom.scrollOffset(({scrollHeight}) => {
              // 这个this.scrollTop 是data中的变量 控制srcollView的滚动距离  500为滚动元素的高度
              this.scrollTop = scrollHeight - 500
          }).exec()
    })
}

// 第二种 高度动态获取
// 不建议这种写法 ！！！
// 嵌套获取可以获取到元素的实际高度 避免固定的数值  但是由于嵌套操作dom存在严重的性能问题 
// 可以通过boundingClientRect先获取到后存储为变量，再scrollOffset进行使用来解决
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()
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

使用示例

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y charRecord">
    <!-- 聊天信息 -->
</scroll-view>
1
2
3

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

如果恰好你需要隐藏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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14