鼠标滚动控制全屏切换| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第3天
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头部往上走，切换至全屏视图
