温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

UniApp中Scroll-View怎么设置占满下方剩余高度

发布时间:2023-05-09 15:28:26 来源:亿速云 阅读:193 作者:zzz 栏目:开发技术

这篇文章主要介绍“UniApp中Scroll-View怎么设置占满下方剩余高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“UniApp中Scroll-View怎么设置占满下方剩余高度”文章能帮助大家解决问题。

一、布局描述:

屏幕分为上下两部分,上面部分高度固定,比如 400rpx(单位可以指定为其他的比如px、upx等,高度也可以自己设定),下面部分为 scroll-view 占满剩余高度,两者宽度都是占满,效果图如下:

UniApp中Scroll-View怎么设置占满下方剩余高度

二、实现方法如下

经验证 APP 端和 H5端都可适用(易于看懂就直接上代码了),不管底部是有 tabbar 还是没有 tabbar 都兼容

<template>
    <view class="full-page">
        <view class="top"></view>
        <scroll-view class="scroll">
            <!-- scroll 承载的内容,超过长度可滑动,可自行填充 -->
        </scroll-view>
    </view>
</template>
<script>
    export default {
        onLoad() {
            // uni.hideTabBar();// 控制是否隐藏底部 tabbar
        }
    };
</script>
<style>
    .full-page {
        width: 100%;
        height: 100vh;
        background-color: red; // 全屏背景色:红色
    }
 
    .top {
        width: 100%;
        height: 400rpx;
        background-color: green; // 上面部分背景色:绿色
    }
 
    .scroll {
        width: 100%;
        height: calc(100vh - 400rpx);
        background-color: blue; // 下面滚动区域部分背景色:蓝色
    }
</style>

三、在整个摸索分析过程中,用到过下面一些方法

虽然最后没有借此实现所需要的布局,但对于以后相关的开发还是有一些借鉴意义的:

1、获取某个view的高度,以下面 view 为例

// 给 view 添加 id 比如“test_id”
<view id="test_id"></view>
 
// 然后在页面的 onReady 生命周期中获取该 id 对应的高度,单位 px
onReady() {
    console.log('onReady');
    uni.createSelectorQuery().select("#test_id").boundingClientRect(res => {
        let viewHeight = res.height + 'px';
    }).exec();
}

2、获取整个屏幕的宽高(单位:px),连接设备 ADB 后可以用 CMD 窗口命令行获取设备屏幕宽高信息:adb shell wm size,执行后的结果是:宽x高

uni.getSystemInfo({
    success: (res) => {
        let realScreenWidth = res.screenWidth * res.devicePixelRatio + 'px';//屏幕实际宽度
        let realScreenHeight = res.screenHeight * res.devicePixelRatio + 'px';//屏幕实际高度
    }
});

UniApp中Scroll-View怎么设置占满下方剩余高度

3、设置根布局为全屏显示还可以用以下方法

.full-page {//缺点是子布局得是绝对布局
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.full-page {
    width: 100vw;
    height: 100vh;
}
<template>
    <view :>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                realScreenWidth: '',
                realScreenHeight: '',
            };
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    this.realScreenWidth = res.screenWidth * res.devicePixelRatio + 'px';
                    this.realScreenHeight = res.screenHeight * res.devicePixelRatio + 'px';
                }
            });
        }
    };
</script>

四、几个小知识点

1、底部 tabbar 默认高度为 50px,可在 page.json 中修改

2、如果以 vw 为单位,则屏幕总宽度为固定的 100vw,假如屏幕实际宽度为 700px,则 vw 和 px 之间的比例为 7,也就是 1vw = 7px,以此类推

3、如果以 vh 为单位,则屏幕总高度为固定的 100vh,假如屏幕实际高度为 900px,则 vh 和 px 之间的比例为 9,也就是 1vh = 9px,以此类推

4、如果以 rpx 为单位,则屏幕总宽度为固定的 750rpx,假如屏幕实际宽度为 1500px,则 rpx 和 px 之间的比例为 2,也就是 1rpx = 2px,以此类推

5、uni.upx2px(400) 可以将 rpx 单位转换为 px 单位长度,示例中的 400 单位是 rpx

6、scroll-view 的高度必须要设置,如果不设置,则滑动时只会带动整个页面一起滑动,如果设置过低则会导致底部留白,设置过高同样也有问题

关于“UniApp中Scroll-View怎么设置占满下方剩余高度”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI