scroll-view 实现上下左右滚动

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                Vertical Scroll
                <text>\n纵向滚动</text>
            </view>
            <view>
                <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>
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">
                点击这里返回顶部
            </view>
            <view class="uni-title uni-common-mt">
                Horizontal Scroll
                <text>\n横向滚动</text>
            </view>
            <view>
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
                    <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
                    <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
                    <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
	            scrollTop: 0,
	            old: {
	                scrollTop: 0
	            }
	        }
	    },
	    methods: {
	        upper: function(e) {
	            console.log(e)
	        },
	        lower: function(e) {
	            console.log(e)
	        },
	        scroll: function(e) {
	            console.log(e)
	            this.old.scrollTop = e.detail.scrollTop
	        },
	        goTop: function(e) {
	            this.scrollTop = this.old.scrollTop
	            this.$nextTick(function() {
	                this.scrollTop = 0
	            });
	            uni.showToast({
	                icon:"none",
	                title:"纵向滚动 scrollTop 值已被修改为 0"
	            })
	        }
	    }
	}
</script>

<style lang="less">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;
		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}
	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007AFF solid;
		
		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}
</style>