scroll 坑 闲谈

最近码农我头有点炸，遇见个布局bug一直解决不了，让我薅头发都快薅秃了。事情是这样的，月初的时候我接了一个半成品的项目 ，为啥叫半成品呢，就是没有ui 没有产品经理，就老板给了你一个文档，寥寥百字，我们需要什么功能，这样作为前端新手的我十分头炸。好了这先不说，最重要的是这是别人开好头的页面，主管把顶部导航，底部导航写在了一个父页面，然后用scroll 不知道是那个版本的啊，做了整个所有子页面的包裹部分，以便于在这个父页面下的子页面都能滑动。问题就出在这里，不知是什么原因，在电脑端滑动可以，很流畅，但是在手机上滑动就十分艰难，很卡，一次步进不知道有没有1px，这让我很恼火。这还不算完，前面小编说过，他把底部导航写在了一个页面，所以导致，凡是在这个父页面下的子页面全部都会有这个底部导航栏，这就很难受了。小编就想把这个功能单独摘出来，然后在需要用到的子页面单独引入，这个时候问题就来了，底部导航栏不是固定在界面底部而是在内容之后，而且有部分内容刚好被这个底部导航栏挡着，这个问题检查样式根本不管用。让我头疼了好久，因为是固定定位，我给bottom 负值直接就会被遮盖掉。给这个底部导航栏层级9999 也不能显示。这个时候我就明白，是有个盒子影响。要不就是它层级太高影响（这个已经排除了，因为给这个底部导航栏层级9999 也不能显示。），要不就是它是这个底部导航栏的父级，而这个父级影响了它。这样想我就发现为啥不能在子页面单独引入了，因为前一个程序员在父级页面给的占位在滚动区域内部，而子页面也就默认嵌套进了这个区域，而它给这个区域设的是 ：bottom= 2.5 单位我不清楚在哪定义的。应该是rem 估计是组件默认。正是这个样式让我明白要想，底部导航一直在试图底部而不是页面底部，就不能单独在子组件引入，只能在父组件引入了。哎·发现这个scroll 都是坑啊。 给自己一点提醒吧。虽然浪费了三个多小时也没把页面找一个合适的处理方式，但是最起码知道了哪里的问题。感觉还可以了，最起码学到了。加油。

这是父组件的代码

<template>
    <div>
      <!-- 页面上方固定NAVBar -->
        <van-nav-bar v-if="has_header" :title="biaoTi" left-text="返回" left-arrow>
            <van-icon name="search" slot="right"/>
        </van-nav-bar>

        <!-- 滚动区域 -->
        
        <scroll-bar :top="2.3" :bottom="2.5">
          <!-- 设置进入过渡效果 -->
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
            <!--<slot>内容区域</slot>-->
        </scroll-bar>


        <!-- 页面下方固定tab栏 -->
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" to="/frame/home">首页</van-tabbar-item>
           
            <van-tabbar-item to="/frame/hospital">
                <i slot="icon" class="fa fa-hospital-o"/>
                <span>医院</span>
            </van-tabbar-item >
            <van-tabbar-item icon="user-circle-o" to="/frame/users">我</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
  import { Icon, NavBar, Tabbar, TabbarItem } from 'vant'
  // 引入滚动组件
  import ScrollBar from './scroll_bar.vue'
  import properties from '../properties'

  export default {
    name: 'frame',

    components: {
      'scroll-bar': ScrollBar,
      'van-icon': Icon,
      'van-nav-bar': NavBar,
      'van-tabbar': Tabbar,
      'van-tabbar-item': TabbarItem
    },

    data () {
      return {
        // 是否显示的条件  是APP 就显示
        has_header: properties.runtime === 'app',
        active: '',
        biaoTi: '',
      }
    }
  }
</script>

<style scoped>
</style>