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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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
长波有什么东西
2021/03/01 无线电
CI框架给视图添加动态数据
2014/12/01 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python解析xml简单示例
2019/06/21 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
如何基于python实现归一化处理
2020/01/20 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python