【3D商城】鼠标滚动控制全屏切换

ajax请求获取服务器数据

在api文件中编辑index.js

export const getProducts = () => {
  return request({  
    method: "GET",      //  get获取服务器数据
    url: "/products",    //  获取url地址
  });
};

在Product.vue中，导入api文档中的index.js

import * as api from "../api/index.js";

数据获取在生命周期函数onMounted()中获取,从vue中导入reactive，使用reactive方法声明数据为响应性数据，使用setup()方法返回响应性数据，从而template可以获取这些响应性数据

import { onMounted, reactive } from "vue";

生命周期函数onMounted()，当我们页面渲染出这些元素之后，组件挂载完后，进行ajax请求，获取产品数据 result

onMounted(async () => {
  let result = await api.getProducts();
  console.log(result);
  //   data.isLoading = false;
});

同时设置响应式对象，因为要用到很多数据

const data = reactive({
  products: [],
});

终端输入 npm run dev 结果显示如下

设置加载loading组件

  const data = reactive({
  products: [],
  isLoading: true,  //加载完成前，loading为true
});

template：

  <div class="loading" v-show="data.isLoading">
    <Loading :progress="data.progress"></Loading>
  </div>
  <div class="product" v-show="!data.isLoading" id="product">
  </div>

组件Loading导入进Product.vue

import Loading from "../components/Loading.vue";

产品列表和场景列表的编写

导入ant-design（好看的图标）

import {
  SketchOutlined,    //钻石图标
  RadarChartOutlined,
  ShoppingCartOutlined,
} from "@ant-design/icons-vue";

template（ 在class="product"的div中）：

<div class="prod-list">
   <h1><SketchOutlined></SketchOutlined>产品推荐</h1>
</div>
<div class="scene-list">
  <h3><RadarChartOutlined></RadarChartOutlined> 切换使用场景</h3>
</div>

style样式

<style lang="less" scoped>
.prod-list {
  width: 300px;    //宽度：300px
  height: 100vh;   //高度：100%屏幕视觉视口高度
  padding: 60px 0 0;  // 上（60）右（0）下（0）左（0）
  position: fixed;   //左边菜单  固定定位
  z-index: 100000;   //置于顶层
  transition: all 0.5s;  //渐变退出效果效果  0.5s退出
  background-color: rgba(255, 255, 255, 0.8);  // 白色和0.8透明度
  left: 0;  // 定位左边0
  top: 0;   // 定位顶边0
  }
.scene-list {
  width: 300px;    //宽度：300px
  height: 100vh;   //高度：100%屏幕视觉视口高度
  padding: 60px 0 0;  // 上（60）右（0）下（0）左（0）
  position: fixed;   //左边菜单  固定定位
  z-index: 100000;   //置于顶层
  transition: all 0.5s;  //渐变退出效果效果  0.5s退出
  background-color: rgba(255, 255, 255, 0.8);  // 白色和0.8透明度
  right: 0;  // 定位右边0
  top: 0;   // 定位顶边0
  }
</style>

监听鼠标滚动事件

window.addEventListener("mousewheel", (e) => {
  //   console.log(e);
  if (e.deltaY > 0) {
    store.commit("setFullscreen", true);
  }

  if (e.deltaY < 0) {
    store.commit("setFullscreen", false);
  }
});

鼠标滚动时候，左右产品列表和场景列表以及导航条都会消失，一个数据改变多个组件，需要用状态管理，在store中的index.js中设置一个全屏状态

import { createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0,
      isFullscreen: false,  //默认不是全屏状态
      buycarts: [],
    };
  }
mutations: {
	setFullscreen(state, payload) {     
	      state.isFullscreen = payload;
 //设置全屏方法  state传入状态,payload有效载荷,载荷告诉为全品就是全屏	 
	    },
}
 })

Product.vue中导入store并且初始化

import { useStore } from "vuex";
const store = useStore();

列表标签中显示设置隐藏属性

template中：

    <div class="prod-list" :class="{ hidden: store.state.isFullscreen }">
    <div class="scene-list" :class="{ hidden: store.state.isFullscreen }">

样式：

.prod-list.hidden {
  transform: translate(-100%, 0); //水平位置移动-100%  垂直不变
}
.scene-list.hidden {
  transform: translate(100%, 0);//水平位置移动+100%  垂直不变
}

头部标签中显示设置隐藏属性

Header.vue组件中添加
style:

.header.hidden {
  transform: translate(0, -100%);  //水平不动，垂直移动-100%
}
.header {
  transition: all 0.5s;  //过渡效果，0.5秒退出
}

script:

import { useStore } from "vuex";
const store = useStore();

template:

<div class="header" :class="{ hidden: store.state.isFullscreen }">

结果

滚动鼠标时，产品列表和场景列表往两边走，header头部往上走，切换至全屏视图