vue实现滚动鼠标滚轮切换页面


Posted in Vue.js onDecember 13, 2020

本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码,供大家参考,具体内容如下

新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页就是类似于纵向走马灯,鼠标滚动切换,一次切换一整屏的效果。之前没接触过,写了个简单的demo,仅作为学习笔记。

其实原理很简单,就是把所有页面放在一个div中,然后滚动的时候改变外层div的top即可。

因为滚动条监听事件是实时的,所以要加上节流来防止页面切换太快速,我这控制在1.5s才能切换一页。

其实vue不应该操作dom,应该用数据来渲染虚拟dom,但是有些地方暂时没找到合适的方法,还是用的dom操作。

<template>
  <div id="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ top: nowTop + 'px' }">
      <ul id="pageUl" type="circle">
        <li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}"> </li>
        <li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}"> </li>
        <li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}"> </li>
        <li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}"> </li>
        <li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}"> </li>
      </ul>
      <div style="background-color: #1b6d85" id="page1" class="page"></div>
      <div style="background-color: #5cb85c" id="page2" class="page"></div>
      <div style="background-color: #8a6d3b" id="page3" class="page"></div>
      <div style="background-color: #337ab7" id="page4" class="page"></div>
      <div style="background-color: #66512c" id="page5" class="page"></div>
    </div>
  </div>
</template>
 
<script>
  
  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.screenWeight = document.documentElement.clientWidth;
      this.screenHeight = document.documentElement.clientHeight;
      this.main = document.getElementById("main");
      this.obj = document.getElementsByTagName("div");
      for (let i = 0; i < this.obj.length; i++) {
        if (this.obj[i].className == 'page') {
          this.obj[i].style.height = this.screenHeight + "px";
        }
      }
      this.pageNum = document.querySelectorAll(".page").length;
 
      // 浏览器兼容   
      if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
        document.addEventListener("DOMMouseScroll", this.scrollFun, false);
      } else if (document.addEventListener) {
        document.addEventListener("mousewheel", this.scrollFun, false);
      } else if (document.attachEvent) {
        document.attachEvent("onmousewheel", this.scrollFun);
      } else {
        document.onmousewheel = this.scrollFun;
      }
    },
    methods:{
      scrollFun(event) {
        this.startTime = new Date().getTime();
        // mousewheel事件中的 “event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动
        // DOMMouseScroll事件中的 “event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动
        let delta = event.detail || (-event.wheelDelta);
        // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s,则不执行翻页动作,这样做是为了实现类似节流的效果
        if ((this.startTime - this.endTime) > 1500) {
          if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {
            // 向下滚动
            this.index++;
            this.toPage(this.index);
          }else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
            // 向上滚动
            this.index--;
            this.toPage(this.index);
          }
          // 本次翻页结束,记录结束时间,用于下次判断
          this.endTime = new Date().getTime();
        }
      },
      // 翻页
      toPage(index) {
        if (index != this.curIndex) {
          let delta = index - this.curIndex;
          this.nowTop = this.nowTop - delta * this.screenHeight;
          this.curIndex = index;
        }
      }
    }
  }
</script>
<style>
  html, body {
    height: 100%;
  }
 
  body, ul, li, a, p, div {
    /*慎删*/
    padding: 0px;
    margin: 0px;
  }
 
  #wrap {
    overflow: hidden;
    width: 100%;
  }
 
  #main {
    position: relative;
    transition:top 1.5s;
  }
 
  .page {
    /*谨删*/
    width: 100%;
    margin: 0;
  }
 
  #pageUl {
    position: fixed;
    right: 10px;
    bottom: 50%;
  }
 
  .active{
    color: red;
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
You might like
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
点菜员岗位职责范本
2014/02/14 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
消防安全员岗位职责
2014/03/10 职场文书
保护环境的建议书
2014/03/12 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript