m0_67982952 2022-03-11 21:00 采纳率: 46.7%
浏览 168
已结题

请问uni-app中的css嵌套着写会报错能调整吗?

img

img


如图,在uni-app中,我将CSS这样嵌套写,这会报错,请问该如何修改?
代码如下:

<template>
    <view class="navbar">
        <view class="navbar-fixed">
            <view :style="{height: statusBarHeight+'px' }"></view>
            <view class="navbar-content" :style="{width:navbarWidth+'px',height:navbarHeight+'px'}">
                <view class="navbar-search">
                    <view class="navbar-search_icon"></view>
                    <view class="navbar-search_text">前端</view>
                </view>
            </view>
        </view>
        <!-- 因为 navbar-fixed 固定定位,故父元素高度为0,下面元素的作用就是将父元素的高度撑起来为45px -->
        <view :style="{height:navHeight+'px'}"></view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                statusBarHeight: 20, // 状态栏高度
                navbarHeight: 45, // 导航栏内容区域高度
                navbarWidth: 375, // 导航栏内容区域宽度
                navHeight: 45 // 整个导航栏容器高度
            };
        },
        created() {
            const info = uni.getSystemInfoSync()
            this.statusBarHeight = info.statusBarHeight
 
            // 设置导航栏搜索区域的宽度
            this.navbarWidth=info.windowWidth
            // 获取胶囊的位置,并计算导航栏的高度,下面API H5、App和阿里云小程序不支持,所以需要条件编译
            // #ifndef APP-PLUS||H5||MP-ALIPAY
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
            this.navbarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
            this.navbarWidth = menuButtonInfo.left
            this.navHeight=info.statusBarHeight+this.navbarHeight
            // #endif
        }
    }
</script>
 
<style lang="scss">
    .navbar {
 
 
        .navbar-fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: $mk-base-color;
 
            .navbar-content {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                padding: 0 15px;
                height: 45px;
 
                .navbar-search {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 30px;
                    background: #fff;
                    border-radius: 30px;
                    padding: 0 10px;
 
                    .navbar-search_icon {
                        width: 10px;
                        height: 10px;
                        border: 1px solid red;
                        margin-right: 10px;
                    }
 
                    .navbar-search_text {
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
        }
    }
</style>

请赐教,不胜感激。

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-03-11 21:26
    关注

    多了一个},删除一个

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月26日
  • 已采纳回答 3月18日
  • 创建了问题 3月11日

悬赏问题

  • ¥15 基于bert-base-chinese的中文文本处理
  • ¥15 高价求抖音抓包技术,抖音抓包无网络问题
  • ¥15 【matlab】已知功率谱密度反求时域信号
  • ¥15 mindspore项目_模型适配
  • ¥15 openstack使用cinder后,实例运行时分配的总空间不能大于ceph的总空间
  • ¥15 [pcl::PLYWriter::writeASCII] Error during opening (?鶂?)!
  • ¥15 得到XY两轴的数据如何绘制成圆,输入整形器
  • ¥29 PHP读取PDF文件添加多个数字签名
  • ¥25 联邦学习vgg修改最后一个全连接层报错(默认是1000个输出,我的改为11就报错,改为200就没问题)
  • ¥15 maple画图问题,为什么会是这样