uniapp中scroll-view滾動條的使用

1、橫向滾動基本寫法

<template>
    <view>
        <!-- 橫向滾動條 -->
        <view class="uni-padding-wrap uni-common-mt">
            <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="100%" @scrolltolower="scrolltolower">
                <view class="scroll-view-item_H uni-bg-red">A</view>
                <view class="scroll-view-item_H uni-bg-green">B</view>
                <view class="scroll-view-item_H uni-bg-blue">C</view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            scroll(event) {
                //距離每個邊界距離
                console.log(event.detail)
            },
            //滾動到底部/右邊觸發
            scrolltolower() {
                console.log(1111);
            },
            // 滾動到頂部/左邊觸發
            scrolltoupper() {
                console.log(2222);
            }
        }
    }
</script>

<style lang="scss">
    .scroll-view_H {
        white-space: nowrap;
        .scroll-view-item_H {
            display: inline-block;
            width: 100%;
            height: 100px;
        }
        .uni-bg-red {
            background: red;
        }
        
        .uni-bg-green {
            background: green;
        }
        
        .uni-bg-blue {
            background: blue;
        }    
    }
</style>

2、縱向滾動基本寫法

<template>
    <view>
        <!-- 這層標簽沒有也可以 -->
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"
                 @scrolltolower="lower">
                    <view class="scroll-view-item top">上</view>
                    <view class="scroll-view-item center">中</view>
                    <view class="scroll-view-item bottom">下</view>
                </scroll-view>
            </view>
            <view @tap="goTop" class="uni-link uni-center uni-common-mt">
                點擊這里返回頂部
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                old: {
                    scrollTop: 0,
                }
            }
        },
        methods: {
            scroll(e) {
                this.old.scrollTop = e.detail.scrollTop
            },
            goTop() {
                //這里必須將this.old.scrollTop值賦值給this.scrollTop
                this.scrollTop = this.old.scrollTop;
                this.$nextTick(function() {
                    this.scrollTop = 0
                });
            },
            upper(){
                // 滾動到頂部/左邊觸發
            },
            lower(){
                // 滾動到底部/右邊觸發
            }
        }

    }
</script>

<style lang="scss">
    .scroll-view {
        // white-space: nowrap;
        height: 200px;
        width: 100%;

        .top {
            height: 200px;
            width: 100%;
            background: red;
        }

        .center {
            height: 200px;
            width: 100%;
            background: green;
        }

        .bottom {
            height: 200px;
            width: 100%;
            background: blue;
        }
    }
</style>