vue开发从青铜到黄金的路上_vue unknown function 'translate3d-CSDN博客

本文链接：https://blog.csdn.net/FateInTheSky/article/details/108343111

功能需求描述

本人最近开发一个项目，需求是这样：
1、首页需要一屏展示内容，即每次滚动鼠标的时候页面就划过整个页面（可视区内），其他子页面不需要，依旧是鼠标滚动多少就滚到哪里。
2、首页需要进行页面缓存，意思就是从子页面回到首页的时候，首页保持当前的滚动位置不变。
3、页面顶部的导航栏发生滚动后导航从透明变成半透明（我这里是变黑色，因为我们的网站主题色是黑色的）刚页面加载进入的时候导航栏是透明的，因为页面有背景图。

难点

1、首页需要一屏展示内容的功能就相当于要计算屏幕可视区的高度，还要考虑页面的适配问题，比如pc端就有各种笔记本、台式机屏幕大小同的问题。

2、导航栏的滚动变色，虽然可以使用监听scroll事件来实现，但是由于首页是一屏展示，所以使用scroll不可行，因为没有滚动距离。

3、首页需要页面缓存，但是子页面是不需要，进入子页面的时候必须是从顶部开始的。如果直接使用vue的keep-alive属性就会造成进入子页面并不会从顶部开始，而是会从首页滚动位置开始，如果再加上scrollBehavior就会导致首页的缓存不起作用，就是回退至首页也不会保留滚动位置。

4、首页有一个视频当做背景，需要全屏展示，虽然通过获取屏幕高度设置height:100%；width:100%这两个样式实现了，但是edge这浏览器不兼容，两边会出现留白而且还很多。

解决方案

1、首页的一屏展示使用css3的一个transform: translate3d()这个属性，对y轴进行旋转，每次鼠标的滑轮滚动就旋转n个页面的高度，所以需要动态计算这个值，因为鼠标滚轮触发事件很频繁，所以监听鼠标滚轮事件需要加上一个防抖函数，设置鼠标连续滚动几秒后再触发事件。关键点代码如下

/*vue中动态绑定transfrom属性以及页面的高度*/
<div :style="{'height':height+'px','transform': `translate3d(${0}px, ${-changeHeight}px,0px)`}">
</div>

//防抖函数
activated(){
//我这里声明多一次scrollEvent是为了方便移除鼠标滚轮事件的监听
	this.scrollEvent = this.debounce(this.handleScroll,100)
	 window.addEventListener('mousewheel',this.scrollEvent,true)||
  	 window.addEventListener('DOMMouseScroll',this.scrollEvent,false)
}，
  methods:{
  //防抖
	  debounce(func,wait){
	      let timeout;
	      return function () {
	        let context = this;
	        let args = arguments;
	        if (timeout) clearTimeout(timeout);
	        timeout = setTimeout(() => {
	            func.apply(context, args)
	        }, wait);
	      }
	    },
	    //鼠标滑轮事件
    handleScroll(e){
      e = e||event
      let d = e.deltaY||e.detail
      let direction = d > 0 ? 'down' : 'up'
        if(direction == 'down'){
          this.nextTo()
        }else if(direction == 'up'){
          this.preTo()
        }
    },
  }

2、由于首页跟其他页面展示不一样所以我还想不到比较好的方案解决这个共用导航栏的问题（如果有大佬求指点一下）本人菜鸟一个，所以我用的方案是首页单独一个页面，导航栏跟页脚都单独开发一个页面，跟其他页面不共用，这样首页的导航栏根据监听鼠标滚轮事件改变的索引值大小而变色，每当index>0就变色，而其他页面的导航栏就监听scroll事件就可以了，根据window.pageYOffset>0就改变颜色。
3、实现首页的页面缓存问题，我是将keep-alive跟scrollBehavior结合使用，判断当前页面是否是需要缓存的，如果是的话就使用scrollBehavior进行滚动历史记录位置，如果否就滚动到页面顶部，大部分pc跟移动浏览器都行得通，部分移动端浏览器不行。这里需要在路由里面的首页设置一下两个属性关键点代码如下：

//路由配置
	{
		path:'/',
  		component:Home,
   	   meta:{
   	      keepAlive: true, //这个属性是表示页面需要缓存
   	      savedPosition:0 //这个是保留页面滚动位置
   	    }
   }



const router = new VueRouter({
 routes,
 //解决路由跳转的时候页面不回到顶部问题,解决移动端keepAlive不保留首页的滚动位置问题
 scrollBehavior(to,from){
   if (from.meta.keepAlive) {
     from.meta.savedPosition = document.body.scrollTop;
   }
   return { 
     x: 0,
     y: to.meta.savedPosition ||0
   }
 }
})

4、关于edge浏览器的video标签全屏问题，我是将判断了如果是该浏览器则高度自适应，而不是设置100%,最后完美解决。
关键代码如下

//判断是否是IE浏览器
   isIEWeb(){
     var explorer = window.navigator.userAgent
     if (!!window.ActiveXObject || "ActiveXObject" in window|| explorer.indexOf('Edge')>-1){
       this.isIE =true
     }else{
       this.isIE = false
     }
   },