mani.vue上下固定,中间滚动布局

<template>
      <div id="header" @touchmove.prevent @mousewheel.prevent style="background-color: #fff;">
            <!--  下面是头-->
            <div class="titlediv">
                  <img @click="gotoback" class="oneimg"
                        src="http://blog.img.duanshuilu.com/dddddSnipaste_2022-05-12_11-27-52.png" alt="">
                  <div class="onediv">
                        请点击头像登录
                  </div>
                  <div class="twodiv">
                        <img class="one" src="http://blog.img.duanshuilu.com/aa消息.png" alt="">
                        <img class="two" src="http://blog.img.duanshuilu.com/213213213设置.png" alt="">
                  </div>
            </div>
            <!-- 上面是头 -->

            <!--   -->
            <div class="twocomdiv" style="">
                  <!--    下面是全部 ...........................................................................................................    -->
                  <!-- 计算高度 ---然后在里面做滚动效果-->
                  <div v-show="myindex==0" class="pdivone">
                        <div class="pdivone" ref="wrapper">
                              <!-- 下面的第一个标签,就是滚动内容................................................................. -->
                              <div class="myul">

                              </div>
                              <!-- 上面的第一个标签,就是滚动内容 .............................................................-->
                        </div>
                  </div>

                  <!--    上面是全部 ...........................................................................................................    -->

                  <!--        下面是进行中 -->
            </div>
            <!--   上面是2个组件的引入  -->

            <!--   下面是占位  -->
            <div style="width: 100vw;height: 60rem;"></div>

      </div>
</template>
 
<script>
      import BScroll from '@better-scroll/core'

      export default {
            name: 'homeLayoutHeader',
            components: {},
            mounted() {
                  setTimeout(() => {
                        this.initScroll()
                  }, 20)
            },
            data() {
                  return {
                        myindex: 0,

                        dropDownActive: '',
                        active: 0
                  }
            },
            methods: {
                  gotoback() { //返回
                        this.$router.go(-1)
                  },
                  initScroll() {
                        const bs = new BScroll(this.$refs.wrapper, {
                              click: true
                        })
                        console.log(bs)
                        bs.on('scroll', position => {
                              console.log(position.x, position.y)
                        })
                  },

                  mouserOver(v, tp) {
                        //点击切换tabs的事件
                        this.dropDownActive = tp

                        this.active = v
                        this.myindex = v
                        console.log('打印一下,控制器', this.myindex)
                        this.liList.map((item, index) => {
                              if (v === index) {
                                    item.img = 'up'
                              } else {
                                    item.img = 'down'
                              }
                        })
                        // this.initScroll()
                  },
                  contentmouseleave() {},
                  productContentMouseover(value) {},
                  planContentMouseover(value) {}
            }
      }
</script>
 
<style scoped>
      /* 底部 */
      .huifubottom {
            width: 100vw;
            height: 120px;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 9999999;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 20px;
            box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
      }

      .huifutext {
            width: 130px;
            height: 70px;
            background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
            text-align: center;
            line-height: 70px;
            color: #fff;
            font-size: 18px;
      }

      .huifubottom .one {
            width: 80vw;
      }

      .huifubottom .one input {
            width: 100%;
            height: 70px;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #ccc;
      }

      .huifubottom .two {
            width: 20vw;
            display: flex;
            justify-content: center;
            align-items: center;
      }

      .titlediv .twodiv .one {

            width: 50px;
            height: 50px;
            position: absolute;
            right: 100px;
            top: 30px;
      }

      .titlediv .twodiv .two {
            width: 46px;
            height: 46px;
            position: absolute;
            right: 20px;
            top: 30px;
      }

      /* */
      .titlediv {
            width: 100vw;
            height: 200px;
            background-color:#fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            position: relative;
      }

      .titlediv .oneimg {
            width: 120px;
            height: 120px;
            position: absolute;
            top: 10px;
            left: 30px;

      }

      .titlediv .onediv {
            font-size: 30px;
            color: #000;
            position: absolute;
            top: 30px;
            left: 180px;
            font-weight: bolder;
      }

      .titlediv .twodiv {
            font-size: 28px;
      }

      /* .titlediv .oneimg {
            width: 35px;
            height: 35px;
      } */

      /* */
      .myul li {
            width: 100vw;
            height: 300px;
            margin: 40px 0px 20px 0px;
      }

      .pdivone {
            width: 100vw;
            height: calc(100vh - 260px);
            background-color: #fff;
            position: fixed;
            left: 0px;
            top: 140px;
            overflow: hidden;
      }

      .alldindan .myoutdivd {
            position: absolute;
            top: 0px;
            right: 45px;
            /* color: rgb(102, 89, 18); */
      }

      .alldindan .mycolor {
            width: 190px;
            height: 60px;
            /* background-color: #f3e745; */
            position: absolute;
            top: 10px;
            right: 20px;
            border-radius: 40px;
            opacity: 0.5;
      }

      .myoutdivd {
            display: flex;
            align-items: center;
      }

      .myoutdivd .mytext {
            font-size: 23px;
            margin-left: 5px;
      }

      .thimg {
            width: 40px;
            height: 40px;
      }

      .alldindan {
            width: 100vw;
            height: 80px;
            text-align: center;
            line-height: 80px;
            font-weight: bolder;
            font-size: 32px;
            position: relative;
      }

      .twocomdiv {
            background-color: #ffffff;
            width: 100vw;
            height: 100vh;
            margin-top: 60px;
      }

      #header {
            width: 100vw;
            height: 100vh;
      }

      * {
            margin: 0;
            padding: 0;
      }

      .conten_width {
            height: 80px;
            width: 100vw;
            margin: 0 auto;
            box-sizing: border-box;
      }

      .contnet_width_content {
            height: 80px;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
      }

      .header_ul {
            display: flex;
            width: 90vw;
            height: 30px;
            justify-content: space-between;
            transform: translateX(0px);
            font-size: 30px;
            line-height: 95px;
      }

      .header_ul li {
            padding-bottom: 80px;
            cursor: pointer;
            padding-left: 2px;
      }

      .chosed {
            border-bottom: 5px solid red;
            position: relative;
            left: -5px;
      }
</style>