uni-app 可滚动视图区域scroll-view的使用

官方文档

<template>
    <!-- 外围视图使用flex布局 -->
    <view style="display: flex" id="view1">
        <!-- 左侧滚动区域 -->
        <view style="width: 25%">
            <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'">
                <view class="view1" v-for="item in 50" :key="item">{{ item }} </view>
            </scroll-view>
        </view>
        <!-- 右侧滚动区域 -->
        <view style="width: 75%">
            <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'">
                <view class="view2" v-for="item in 50" :key="item + 50">{{ item + 50 }} </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";

    const scrollH = ref(0); // 滚动区域的高度

    // 因为硬件的高度不一致，无法指定，而滚动区域又必须指定高度具体高度，不能使用相对高度。所以就需要在页面加载完成后再去读取组件的高度，赋值给滚动区域
    onMounted(() => {
        let winHeight = uni.getSystemInfoSync().windowHeight; // 获取屏幕高度
        let titleH = uni.createSelectorQuery().select("#view1"); //根据组件id获取
        // prettier-ignore
        titleH.boundingClientRect((data) => {
                scrollH.value = winHeight - data.top; //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
            }).exec();
    });
</script>

<style>
    .view1 {
        height: 40px;
        line-height: 40px;
        background-color: red;
        font-size: x-large;
    }
    .view2 {
        height: 40px;
        line-height: 40px;
        background-color: blue;
        font-size: x-large;
    }
</style>

重点就是一定要指定一个确定的高度，否则它的区域滚动无效。这个高度需要等页面渲染完才能计算出来，所以在onMounted中计算。

两个滚动区域相互不干扰。

因为我使用H5演示，所以那个滚动轴比较丑。手机上会好看点。