概述
本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码，供大家参考，具体内容如下
新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的demo，仅作为学习笔记。
其实原理很简单，就是把所有页面放在一个div中，然后滚动的时候改变外层div的top即可。
因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制在1.5s才能切换一页。
其实vue不应该操作dom，应该用数据来渲染虚拟dom，但是有些地方暂时没找到合适的方法，还是用的dom操作。
export default {
name: 'Home',
data(){
return{
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object
}
},
mounted(){
this.screenWe
最后
以上就是雪白云朵为你收集整理的html鼠标滚动实现页面切换,vue实现滚动鼠标滚轮切换页面的全部内容，希望文章能够帮你解决html鼠标滚动实现页面切换,vue实现滚动鼠标滚轮切换页面所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复