uniapp中的scroll-view滚动条

╰半橙微兮° 2021-07-25 14:11 1477阅读 0赞

官方示例：[https://uniapp.dcloud.io/component/scroll-view][https_uniapp.dcloud.io_component_scroll-view]

## 效果图： ##

![20210308125339924.gif][]

## 实现代码： ##

<template>
    	<view>
    		<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" scroll-with-animation="true" >
    			<view class="uni-bg-red" style="height: 200rpx;">A</view>
    			<view class="uni-bg-green" style="height: 200rpx;">B</view>
    			<view class="uni-bg-blue" style="height: 200rpx;">C</view>
    		</scroll-view>
    		<button @click="goTop()">点击这里返回顶部</button>
    		<scroll-view style="white-space: nowrap;width: 100%;" scroll-x="true" @scroll="scroll" scroll-left="120">
    			<view class="uni-bg-red" style="height: 300rpx;display: inline-block;
    		width: 70%;">A</view>
    			<view class="uni-bg-green" style="height: 200rpx;display: inline-block;
    		width: 70%;">B</view>
    			<view class="uni-bg-blue" style="height: 300rpx;display: inline-block;
    		width: 100%;">C</view>
    		</scroll-view>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				scrollTop: 0,
    				old: {
    					scrollTop: 0
    				}
    			}
    		},
    		methods: {
    			upper: function(e) {
    				console.log("滚动到顶部：",e)//滚动到顶部/左边，达到阈值会触发 scrolltoupper 事件
    			},
    			lower: function(e) {
    				console.log("滚动到底部：",e)//滚动到底部/右边，达到阈值会触发 scrolltolower 事件
    			},
    
    			scroll: function(e) {
    				console.log(e)
    				this.old.scrollTop = e.detail.scrollTop//滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
    			},
    			goTop: function(e) {
    				// 解决view层不同步的问题
    				this.scrollTop = this.old.scrollTop
    				this.$nextTick(function() {
    					this.scrollTop = 0
    				});
    				uni.showToast({
    					icon:"none",
    					title:"纵向滚动 scrollTop 值已被修改为 0"
    				})
    			}
    		}
    	}
    </script>

[https_uniapp.dcloud.io_component_scroll-view]: https://uniapp.dcloud.io/component/scroll-view
[20210308125339924.gif]: /images/20210725/936ce42f56144cfe93ce0086a66cab37.png