smart-screen-demo-web/src/view/tabs/tabs.vue

<template>
    <div id="tabs-wrapper">
      <!-- 下拉 -->
      <div
        class="drop-down-menu"
        @touchstart="dropDownMenuStart($event)"
        @touchmove="dropDownMenuMove($event)"
        @touchend="dropDownMenuEnd($event)">
      </div>
      <DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu>
      <div class="swiper">
        <div class="swiper-wrapper" @touchstart.self>
          <div class="swiper-slide">
            <div class="swiper-item">
              <div><FixedTime></FixedTime></div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-item">
                <div><HomeScreen></HomeScreen></div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-item">
                <div><DeviceControl></DeviceControl></div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-item">
                <div><Scene></Scene></div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    onBeforeMount,
    onMounted,
    nextTick,
} from 'vue';
import { Swiper, Navigation, Pagination } from "swiper";
import FixedTime from './fixed-time.vue';
import HomeScreen from './home-screen.vue';
import DeviceControl from './device-control.vue';
import Scene from './scene.vue';
import DropDownMenu from '../drop-down-menu/drop-down-menu.vue';
import "swiper/swiper-bundle.css";

let mySwiper: Swiper; // 声明swiper
const touchStart = ref(0);
const touchDis = ref(0);
/** 是否展示菜单 */
const showMenu = ref(false);
const menuDom: any = ref();

onMounted(() => {
    initSwiper();
    menuDom.value = document.getElementById('menu') as HTMLElement | null;
})

/** 初始化swiper */
const initSwiper = () => {
  mySwiper = new Swiper(".swiper", {
    modules: [Navigation, Pagination],
    // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
    // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    pagination: {
      el: ".swiper-pagination",
    }, //分页样式
    touchStartPreventDefault   : false,
    effect: "fade", //轮播图切换效果的类型
    resistanceRatio: 0,
  });
}

/** 下拉菜单开始 */
const dropDownMenuStart = (event: any) => {
  touchStart.value = 0;
  touchDis.value = 0;
  touchStart.value = event.targetTouches[0].pageY;
}

/** 下拉菜单移动 */
const dropDownMenuMove = (event: any) => {
  // 顶部上下拖拽
  let touchPos = event.targetTouches[0].pageY;
  touchDis.value = touchPos - touchStart.value;
  if (document.documentElement.scrollTop === 0 && touchDis.value > 0) {
    showMenu.value = true;
    if (menuDom.value) {
      const top = (-(window.innerHeight) + touchDis.value) > 0? 0: (-(window.innerHeight) + touchDis.value);
      menuDom.value.style.top = `${top}px`;
    }
  } else {
    showMenu.value = false;
  }
}

/** 下拉菜单结束 */
const dropDownMenuEnd = (event: any) => {
  if (touchDis.value > 0) {
    if (menuDom.value) {
      menuDom.value.style.transition = `${(window.innerHeight - touchDis.value) / (window.innerHeight)}s`;
      menuDom.value.style.top = '0';
    }
  }
}

/** 点击收起菜单 */
const pullUp = () => {
  if (menuDom.value && (menuDom.value.style.top === '0px' || menuDom.value.style.top === '0')) {
    menuDom.value.style.top = '-100vh';
    menuDom.value.style.transition = '0.5s';
    // 0.5s动画时间。等时间过去隐藏
    setTimeout(() => {
      showMenu.value = false;
      menuDom.value.style.transition = '0s';
    }, 500);
  }
}
</script>

<style lang="scss" scoped>
#tabs-wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  -webkit-overflow-scrolling: touch;

  .drop-down-menu {
    width: 100vw;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }

  #menu {
    position: absolute;
    top: -100vh;
    z-index: 999;
  }
}
</style>