需求列表 产品列表
This commit is contained in:
@ -1,10 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
{{ msg }}
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
<div v-loading="loading" class="fullPage" ref="fullPage">
|
||||
<div class="fullPageContainer" ref="fullPageContainer">
|
||||
<!-- <div
|
||||
v-for="(item, $index) in state.boxList"
|
||||
class="section"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
>
|
||||
<component :is="item.comp"></component>
|
||||
</div> -->
|
||||
|
||||
const msg = ref("hekko");
|
||||
<!-- <div class="section"><index1></index1></div>
|
||||
<div class="section"><index2 /></div>
|
||||
<div class="section"><index3 /></div>
|
||||
<div class="section"><index4 /></div>
|
||||
<div class="section"><index5 /></div>
|
||||
<div class="section"><index6 /></div>
|
||||
<div class="section"><index7 /></div>
|
||||
<div class="section"><index8 /></div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="home">
|
||||
<transition-group
|
||||
:enter-active-class="state.animate.in"
|
||||
:leave-active-class="state.animate.out"
|
||||
>
|
||||
<div
|
||||
v-for="(item, $index) in state.boxList"
|
||||
class="box"
|
||||
:key="$index"
|
||||
:style="`z-index: ${item.zIndex};`"
|
||||
v-show="state.showBox === $index"
|
||||
>
|
||||
<component :is="item.comp"></component>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
// let state = reactive({
|
||||
// fullpage: {
|
||||
// current: 1, // 当前的页面编号
|
||||
// isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
|
||||
// deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
|
||||
// },
|
||||
// showBox: 0,
|
||||
// boxList: [
|
||||
// {
|
||||
// comp: index1,
|
||||
// zIndex: 1,
|
||||
// title: "index1",
|
||||
// },
|
||||
// {
|
||||
// comp: index2,
|
||||
// zIndex: 1,
|
||||
// title: "index2",
|
||||
// },
|
||||
// {
|
||||
// comp: index3,
|
||||
// zIndex: 1,
|
||||
// title: "index3",
|
||||
// },
|
||||
// {
|
||||
// comp: index4,
|
||||
// zIndex: 1,
|
||||
// title: "index4",
|
||||
// },
|
||||
// {
|
||||
// comp: index5,
|
||||
// zIndex: 1,
|
||||
// title: "index5",
|
||||
// },
|
||||
// {
|
||||
// comp: index6,
|
||||
// zIndex: 1,
|
||||
// title: "index6",
|
||||
// },
|
||||
// {
|
||||
// comp: index7,
|
||||
// zIndex: 1,
|
||||
// title: "index7",
|
||||
// },
|
||||
// {
|
||||
// comp: index8,
|
||||
// zIndex: 1,
|
||||
// title: "index8",
|
||||
// },
|
||||
// ],
|
||||
// animate: {
|
||||
// in: "animate__animated animate__fadeInDown",
|
||||
// out: "animate__animated animate__fadeOutDown",
|
||||
// },
|
||||
// });
|
||||
// const mouseWheelHandle = (event) => {
|
||||
// // 监听鼠标监听
|
||||
// // 添加冒泡阻止
|
||||
// let evt = event || window.event;
|
||||
// if (evt.stopPropagation) {
|
||||
// evt.stopPropagation();
|
||||
// } else {
|
||||
// evt.returnValue = false;
|
||||
// }
|
||||
// if (state.fullpage.isScrolling) {
|
||||
// // 判断是否可以滚动
|
||||
// return false;
|
||||
// }
|
||||
// let e = event.originalEvent || event;
|
||||
// state.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
|
||||
// if (state.fullpage.deltaY > 0) {
|
||||
// next();
|
||||
// } else if (state.fullpage.deltaY < 0) {
|
||||
// pre();
|
||||
// }
|
||||
// };
|
||||
</script>
|
||||
<!-- <script setup lang="ts">
|
||||
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
import index1 from "./comp/index1.vue";
|
||||
import index2 from "./comp/index2.vue";
|
||||
import index3 from "./comp/index3.vue";
|
||||
import index4 from "./comp/index4.vue";
|
||||
import index5 from "./comp/index5.vue";
|
||||
import index6 from "./comp/index6.vue";
|
||||
import index7 from "./comp/index7.vue";
|
||||
import index8 from "./comp/index8.vue";
|
||||
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
|
||||
onMounted(() => {});
|
||||
function next() {
|
||||
// 往下切换
|
||||
let len = 8; // 页面的个数
|
||||
if (state.fullpage.current + 1 <= len) {
|
||||
// 如果当前页面编号+1 小于总个数，则可以执行向下滑动
|
||||
state.fullpage.current += 1; // 页面+1
|
||||
move(state.fullpage.current); // 执行切换
|
||||
}
|
||||
}
|
||||
function pre() {
|
||||
// 往上切换
|
||||
if (state.fullpage.current - 1 > 0) {
|
||||
// 如果当前页面编号-1 大于0，则可以执行向下滑动
|
||||
state.fullpage.current -= 1; // 页面+1
|
||||
move(state.fullpage.current); // 执行切换
|
||||
}
|
||||
}
|
||||
function move(index) {
|
||||
state.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
|
||||
directToMove(index); //执行滚动
|
||||
setTimeout(() => {
|
||||
//这里的动画是1s执行完，使用setTimeout延迟1s后解锁
|
||||
state.fullpage.isScrolling = false;
|
||||
}, 1010);
|
||||
}
|
||||
function directToMove(index) {
|
||||
let height = proxy.$refs["fullPage"]["clientHeight"]; //获取屏幕的宽度
|
||||
let scrollPage = proxy.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
|
||||
let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
|
||||
scrollHeight = -(index - 1) * height + "px";
|
||||
scrollPage.style.transform = `translateY(${scrollHeight})`;
|
||||
state.fullpage.current = index;
|
||||
}
|
||||
function mouseWheelHandle(event) {
|
||||
// 监听鼠标监听
|
||||
// 添加冒泡阻止
|
||||
let evt = event || window.event;
|
||||
if (evt.stopPropagation) {
|
||||
evt.stopPropagation();
|
||||
} else {
|
||||
evt.returnValue = false;
|
||||
}
|
||||
if (state.fullpage.isScrolling) {
|
||||
// 判断是否可以滚动
|
||||
return false;
|
||||
}
|
||||
let e = event.originalEvent || event;
|
||||
state.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
|
||||
if (state.fullpage.deltaY > 0) {
|
||||
next();
|
||||
} else if (state.fullpage.deltaY < 0) {
|
||||
pre();
|
||||
}
|
||||
}
|
||||
|
||||
let state = reactive({
|
||||
fullpage: {
|
||||
current: 1, // 当前的页面编号
|
||||
isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
|
||||
deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
|
||||
},
|
||||
showBox: 0,
|
||||
boxList: [
|
||||
{
|
||||
comp: index1,
|
||||
zIndex: 1,
|
||||
title: "index1",
|
||||
},
|
||||
{
|
||||
comp: index2,
|
||||
zIndex: 1,
|
||||
title: "index2",
|
||||
},
|
||||
{
|
||||
comp: index3,
|
||||
zIndex: 1,
|
||||
title: "index3",
|
||||
},
|
||||
{
|
||||
comp: index4,
|
||||
zIndex: 1,
|
||||
title: "index4",
|
||||
},
|
||||
{
|
||||
comp: index5,
|
||||
zIndex: 1,
|
||||
title: "index5",
|
||||
},
|
||||
{
|
||||
comp: index6,
|
||||
zIndex: 1,
|
||||
title: "index6",
|
||||
},
|
||||
{
|
||||
comp: index7,
|
||||
zIndex: 1,
|
||||
title: "index7",
|
||||
},
|
||||
{
|
||||
comp: index8,
|
||||
zIndex: 1,
|
||||
title: "index8",
|
||||
},
|
||||
],
|
||||
animate: {
|
||||
in: "animate__animated animate__fadeInDown",
|
||||
out: "animate__animated animate__fadeOutDown",
|
||||
},
|
||||
});
|
||||
</script> -->
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fullPageContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all linear 0.5s;
|
||||
}
|
||||
.section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user