caterory.vue

<template>
      <div id="header" @touchmove.prevent @mousewheel.prevent style="background-color: #fff;">
            <!--  下面是头-->
            <div class="titlediv">
                  <!--   下面是搜索框  ..........................................................................   -->
                  <div style="width: 100vw;z-index: 9999;" class="outselectdiv">
                        <!--  -->
                        <div style="color: black !important;" class="xialakuancss">
                              <DropList labelProperty="city" @change="onDpChange($event)"></DropList>
                        </div>
                        <!--  -->
                        <div class="outdiv" style="position: fixed;z-index: 9999;">
                              <img class="myimg" style src="http://blog.img.duanshuilu.com/dsf12sdf1d22d222df2dsf.png"
                                    alt />
                              <input class="ddd" type="text" placeholder="请输入:姓名/工号/手机号" v-model="jishinum" />

                              <div class="ooodiv">搜索</div>
                        </div>
                  </div>
                  <div class="bemptydiv"></div>
                  <!--  上面是搜索框  ................................................................................ -->
            </div>
            <!-- 上面是头 -->

            <!--   -->
            <div class="twocomdiv" style="">
                  <!--    下面是全部 ...........................................................................................................    -->
                  <!-- 计算高度 ---然后在里面做滚动效果-->
                  <div v-show="myindex==0" class="pdivone">
                        <div class="pdivone" ref="wrapper">
                              <!-- 下面的第一个标签,就是滚动内容 -->
                              <div class="myul">
                                    <div v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]"
                                          :key="index" style="font-size:50px;">
                                          {{item}}
                                    </div>
                              </div>
                              <!-- 上面的第一个标签,就是滚动内容 -->
                        </div>
                  </div>

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

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

            <!--   下面是占位  -->
            <div style="width: 100vw;height: 70rem;"></div>
            <!-- 下面是底部的块 -->

            <!-- 上面是底部的块 -->
      </div>
</template>
 
<script>
      import BScroll from '@better-scroll/core'
      import DropList from './xialakuang'
      export default {
            name: 'homeLayoutHeader',
            components: {
                  DropList
            },
            mounted() {
                  setTimeout(() => {
                        this.initScroll()
                  }, 20)
            },
            data() {
                  return {
                        myindex: 0,
                        jishinum: '', //技师号
                        alljishilist: [], //所有技师数据
                        dropDownActive: '',
                        active: 0
                  }
            },
            methods: {
                  onDpChange(event) {
                        console.log('在父组件中的动作', event) //在父组件中的动作 {index: 0, value: '姓名'}
                        console.log('在父组件中的动作', event.index) //3
                        console.log('在父组件中的动作', event.value) //工号
                  },
                  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>