uniapp超实用页面三层架构（背景层+模糊层+内容层）

Rose✿留白ق೨

已于 2022-10-14 20:08:39 修改

阅读量650

点赞数 1

分类专栏： vue.js 前端 uniapp 文章标签： vue.js javascript 前端

于 2022-10-13 17:45:41 首次发布

本文链接：https://blog.youkuaiyun.com/belongname_/article/details/127305824

版权

前端同时被 3 个专栏收录

8 篇文章

订阅专栏

vue.js

3 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

更新：固定高度 + 滚动条，解决内容超出问题（内容不超出可以去掉）

<template>
  <view>
    <view class="bottom"></view> 
    <view class="middle"></view>
    <view class="content"> info.vue </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.bottom,
.middle {
  position: absolute;
  height: calc(100vh - 88rpx);
  width: 100%;
}

.bottom {
  background-image: url("/static/images/index.png");
  background-size: 100% 100%;
}

.middle {
  background-color: rgba(255, 255, 255, 0.6);
}

.content {
  position: absolute;
  //height: calc(100vh - 88rpx);overflow: scroll;固定高度 + 滚动条，解决内容超出问题（内容不超出可以去掉）
  height: calc(100vh - 88rpx);
  overflow: scroll;
}
</style>