vue左右滑动切换页面,vue鼠标滚轮事件
这篇文章主要为大家详细介绍了某视频剪辑软件实现滚动鼠标滚轮切换页面，类似于纵向走马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现滚动鼠标滚轮切换页面的具体代码，供大家参考，具体内容如下
新项目产品被甲方的要求逼疯了，大概返稿了100 次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的演示，仅作为学习笔记。
其实原理很简单，就是把所有页面放在一个差异中，然后滚动的时候改变外层差异的顶端即可。
因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制在1.5秒才能切换一页。
其实某视频剪辑软件不应该操作多姆，应该用数据来渲染虚拟多姆，但是有些地方暂时没找到合适的方法，还是用的数字正射影像图操作。
模板
div id= wrap :style= { height:screen height px }
div id= main :style= { top:now top px }
ul id=pageUl type=circle
Li id= page ulli 1 class= page ulli :class= { active :curIndex==1 } nbsp ./李
Li id= page ulli 2 class= page ulli :class= { active :curIndex==2 } nbsp ./李
Li id= page ulli 3 class= page ulli :class= { active :curIndex==3 } nbsp ./李
Li id= page ulli 4 class= page ulli :class= { active :curIndex==4 } nbsp ./李
Li id= page ulli 5 class= page ulli :class= { active :curIndex==5 } nbsp ./李
/ul
div style= background-color:# 1b6d 85 id= page 1 class= page /div
div style= background-color:# 5c b85c id= page 2 class= page /div
div style= background-color:# 8a6d 3b id= page 3 class= page /div
div style= background-color:# 337 ab7 id= page 4 class= page /div
div style= background-color:# 66512 c id= page 5 class= page /div
/div
/div
/模板
脚本
导出默认值{
姓名：家，
data(){
返回{
屏幕重量：0,//屏幕宽度
屏幕高度：0,//屏幕高度
索引：1,//用于判断翻页
curIndex: 1，//当前页的指数
开始时间：0,//翻屏起始时间
结束时间：0,//上一次翻屏结束时间
nowTop: 0，//翻屏后顶端的位置
pageNum: 0，//一共有多少页
主：对象，
对象
}
},
已安装(){
这个。屏幕重量=文档。documentelement。客户端宽度；
这个。屏幕高度=文档。documentelement。客户身高；
这个。main=文档。getelementbyid( main )；
这个。obj=文档。getelementsbytagname( div )；
对于(设I=0；i this.obj。长度；i ) {
如果.){
这个。对象[I]。风格。身高=这个。屏幕高度 px ；
}
}
这个。pagenum=文档。查询选择器全部(.第页)。长度；
//浏览器兼容
如果((导航员。用户代理。tolowercase().indexOf(火狐)!=-1)) {
文档。addevent监听器( DOM鼠标滚动，this.scrollFun，false)；
} else if(文档。添加事件侦听器){
文档。addevent侦听器(鼠标滚轮，this.scrollFun，false)；
} else if (document.attachEvent) {
文档。附加事件( onmousewheel ，this。滚动乐趣)；
}否则{
文档。onmousewheel=this。滚动乐趣；
}
},
方法：{
scrollFun(事件){
this.startTime=新日期()。getTime()；
//鼠标滚轮事件中的"事件。车轮增量"属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的"事件。细节"属性值：返回的如果是负值说明滚轮是向上滚动
设delta=事件。详细信息 (-事件。车轮delta)；
//如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
如果((这个。开始时间-这个。结束时间)1500){
if(delta 0 parse int(this。主要的。offsettop)=-(这个。屏幕高度*(这个。pagenum-2))){
//向下滚动
this .索引
这个。topage(这个。指数)；
} else if(delta 0 parse int(this。主要的。offsettop)0){
//向上滚动
这个。索引-；
这个。topage(这个。指数)；
}
//本次翻页结束，记录结束时间，用于下次判断
this.endTime=新日期()。getTime()；
}
},
//翻页
toPage(索引){
如果（索引！=this.curIndex) {
设delta=index-this。curindex
这个。现在top=这个。现在顶三角*这个。屏幕高度；
this.curIndex=index
}
}
}
}
/脚本
风格
html，正文{
身高：100%;
}
正文，ul，li，a，p，div {
/*慎删*/
填充：0px
边距：0px
}
#换行{
溢出：隐藏；
宽度：100%;
}
#main {
位置：相对；
过渡：顶1.5秒
}。页面{
/*谨删*/
宽度：100%;
边距：0;
}
#页面{
位置：固定；
右：10px
底层：50%;
}。活动{
颜色：红色；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。