移动端默认布局+滚动

移动端默认布局

<template>
<div class="m-container">
/* <router-view :key="key" /> */
</div>
</template>

.m-container {
  position: fixed;
  top: 0;
  width: 100vw;
  height: calc(100vh - constant(safe-area-inset-bottom));
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow: hidden;
  background: #f0f2f5;
}

过长滚动

<template>
    <div class="box_demo">
        <div v-for="(item, index) in arr" :key="index">
            {{ item }}
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator"

@Component({
    components: {},
})
export default class ShowPrompt extends Vue {
    arr: any
    created() {
        this.arr = Array.from({ length: 500 }).fill(1)
        console.log("arr", this.arr)
    }
}
</script>

<style lang="scss" scoped>
.box_demo {
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    height: 100%;
    overflow: auto;
}
</style>

效果图

技术回顾

• 父元素设置100vh 子元素设置100% ，既子元素的高度会和屏幕一样高。
• 使用值填充数组

const result =Array.from({length},()=>init);
result; //=>[0,0,0]