【three.js沉浸式商城】滚轮控制边栏消失和展示窗口全屏

需求：鼠标向后滚动时，左右产品列表和场景列表以及导航条都会消失。向前滚动时恢复边栏

思路： 设置全屏属性，监听滚轮事件。因为涉及到边栏，头部等多个组件的操作，当我们在多个页面中使用到了相同的属性时就可以用到状态管理器。

在store中的index.js中设置全屏属性

    setFullscreen(state, payload) {
      state.isFullscreen = payload;
    },

在Product.vue中监听滚轮事件

// 控制鼠标滚动
window.addEventListener('mousewheel',(e)=>{
  if(e.deltaY>0){
    store.commit('setFullscreen',true);

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

  }

});

给涉及到的组件绑定隐藏类，当滚轮触发全屏属性时，隐藏组件

    <div class="scene-list " :class="{hidden:store.state.isFullscreen}">
      <h3><RadarChartOutlined></RadarChartOutlined>切换使用场景</h3>

    <div class="prod-list" :class="{hidden:store.state.isFullscreen}">
      <!-- 两边白色展示栏 -->

在style中设置hidden样式，加入transform让隐藏变得流畅

.scene-list.hidden{
  transform: translate(100%,0);

}

结果：