-
@@ -39,13 +47,19 @@ 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 */
@@ -60,9 +74,73 @@ const initSwiper = () => {
effect: "fade", //轮播图切换效果的类型
});
}
+
+/** 下拉菜单开始 */
+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);
+ }
+}
\ No newline at end of file
+