vue鼠标滚动切换页面导航栏点击切换页面悬浮小圆点切换页面默认选中第一项滚动还是点击都会选中停留所在页面

screenWeight

类似走马灯的切换页面 代码基本上基于下链接的博主 自己增加了一点点小内容
https://blog.csdn.net/Lccccb/article/details/104671115
继续赶项目了…有问题评论或私信 有机会再改善一下
shift+alt+f 代码格式化 排版更整齐
红色拖影是hover属性 点击才有 一开始没有是因为两种情况 一、鼠标滚动切换网页 二、点击顶部导航栏
颜色改变顶部和dot导航栏一致 对应导航所在位置有对应颜色

<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}">&nbsp;</li>
        <li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>
        <li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>
        <li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>
        <li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>
      </ul>
      <div class="nav">
        <div class="citySeven"></div>
        <div class="citySeven_nav">
          <li @click="navTo(2,$event)" :class="{'nav_active': curIndex == 2}">服务项目</li>
          <li @click="navTo(3,$event)" :class="{'nav_active': curIndex == 3}">客户案例</li>
          <li @click="navTo(4,$event)" :class="{'nav_active': curIndex == 4}">新闻资讯</li>
          <li @click="navTo(5,$event)" :class="{'nav_active': curIndex == 5}">联系我们</li>
        </div>
      </div>
      <div class="dot_nav">
        <li @click="navTo(1,$event)" class="dot" :class="{'active': 1 == active}"></li>
        <li @click="navTo(2,$event)" class="dot" :class="{'active': 2 == active}"></li>
        <li @click="navTo(3,$event)" class="dot" :class="{'active': 3 == active}"></li>
        <li @click="navTo(4,$event)" class="dot" :class="{'active': 4 == active}"></li>
        <li @click="navTo(5,$event)" class="dot" :class="{'active': 5 == active}"></li>
        <img src="../../src/assets/img/mouse.png" alt="">
        <p>鼠标向下滚动</p>
      </div>
      <div style="background-color: #1b6d85" id="page1" class="page">
          <aboutUs />
      </div>
      <div style="background-color: #5cb85c" id="page2" class="page">
          <serviceProject />
      </div>
      <div style="background-color: #8a6d3b" id="page3" class="page">3</div>
      <div style="background-color: #337ab7" id="page4" class="page">4</div>
      <div style="background-color: #66512c" id="page5" class="page">5</div>
    </div>
  </div>
</template>
 
<script>
import serviceProject from './serviceProject'
import aboutUs from './aboutUs'
export default {
    components:{
        serviceProject,
        aboutUs
    },
      data() {
    return {
      screenWeight: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      index: 1, // 用于判断翻页
      curIndex: 1, // 当前页的index
      startTime: 0, // 翻屏起始时间
      endTime: 0, // 上一次翻屏结束时间
      nowTop: 0, // 翻屏后top的位置
      pageNum: 0, // 一共有多少页
      main: Object,
      obj: Object,
      active: 1,
    };
  },
  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: {
    navTo(a) {
      console.log(this.index);
      console.log(a);
      this.index = a;
      this.toPage(a);
      this.active = a;
      console.log(this.active);
    },
    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.active = this.index;
          this.toPage(this.index);
        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
          // 向上滚动
          this.index--;
          this.active = 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 scoped>
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 {
  /*谨删*/
  /* background: url('../assets/img/bgm.png');*/
  width: 100%;
  margin: 0;
}

#pageUl {
  position: fixed;
  right: 10px;
  bottom: 50%;
}

.active {
  background-color: red;
  color: red;
}
.nav_active{
    color: greenyellow;
}
.dot_nav img{
    padding-top: 20px;
    width: 15px;
}
.dot_nav p{
    font-size: 10px;
    width: 11px;
    padding-top: 5px;
    font-weight: lighter;
}
</style>

style.css

#app {
    font-size: 0;
    width: 100%;
}

.nav {
    width: 100%;
    height: 50px;
    background-color: #0A0F24;
    display: inline-flex;
    flex-direction: row;
    position: fixed;
    top: 0;
}

.nav a {
    color: white;
}

.router-link-active {
    text-decoration: none;
}

.citySeven {
    display: inline-block;
    width: 50%;
    height: 50px;
    background: url('./img/logo.png')10px no-repeat;
    background-size: 50% 33px;
}

.citySeven_nav {
    width: 35%;
    height: 50px;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 10px;
    white-space: nowrap;
    font-weight: lighter;
}

.citySeven_nav li {
    color: white;
}

.dot_nav {
    position: fixed;
    right: 10px;
    top: 200px;
    width: 30px;
    height: 50%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: beige;
    margin-bottom: 5px !important;
    display: block;
}

.dot:hover {
    background-color: tomato;
}

前方代码丑的有点惨烈 但是通俗易懂 重构后 如下

<template>
  <div id="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ top: nowTop + 'px' }">
      <div class="nav">
        <div class="citySeven"></div>
        <div class="citySeven_nav">
           <li v-for="(item,index) in navName" @click="navTo(index,$event)" 
           :class="{'nav_active': curIndex == index+1}">{{item.name}}</li>
        </div>
      </div>
      <div class="dot_nav">
        <li v-for="(item,index) in navName" @click="navTo(index,$event)"   class="dot"
           :class="{'active': curIndex == index+1}"></li>
        <img src="../../src/assets/img/mouse.png" alt="">
        <p>鼠标向下滚动</p>
      </div>
      <div  id="page1" class="page">
          <aboutUs />
      </div>
      <div  id="page2" class="page">
         <aa />
      </div>
      <div id="page3" class="page">
         <customerCase />
      </div>
      <div  id="page4" class="page">
     <news />
      </div>
      <div  id="page5" class="page">
        <bb />

      </div>
    </div>
  </div>
</template>

<script>
import serviceProject from './serviceProject'
import news from './news'
import aboutUs from './aboutUs'
import customerCase from './customerCase'
import bb from './bb'
import aa from './aa'
export default {
    components:{
        serviceProject,
        aboutUs,
        news,
        customerCase,
        bb,
        aa
    },
      data() {
    return {
      screenWeight: 0, // 屏幕宽度
      screenHeight: 0, // 屏幕高度
      index: 1, // 用于判断翻页
      curIndex: 1, // 当前页的index
      startTime: 0, // 翻屏起始时间
      endTime: 0, // 上一次翻屏结束时间
      nowTop: 0, // 翻屏后top的位置
      pageNum: 0, // 一共有多少页
      main: Object,
      obj: Object,
      active: 1,
      navName:[{name:''},{name:'项目服务'},{name:'客户案例'},{name:'新闻资讯'},{name:'联系我们'}]
    };
  },
  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: {
    navTo(a) {
      this.index = a+1;
      console.log(this.index)
      this.toPage(this.index);
    },
    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.active = this.index;
          this.toPage(this.index);
        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
          // 向上滚动
          this.index--;
          this.active = 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 scoped>
html,
body {
  height: 100%;
  overflow: hidden;
  overflow-x: scroll;
}

body,
ul,
li,
a,
p,
div {
  /*慎删*/
  padding: 0px;
  margin: 0px;
}

#wrap {
  overflow: hidden;
  width: 100%;
}

#main {
  position: relative;
  transition: top 1.5s;
}

.page {
  /*谨删*/
  /* background: url('../assets/img/bgm.png');*/
  width: 100%;
  margin: 0;
}

#pageUl {
  position: fixed;
  right: 10px;
  bottom: 50%;
}


.nav_active{
    color: #0258FF!important;
}
.dot_nav img{
    padding-top: 20px;
    width: 15px;
}
.dot_nav p{
    font-size: 10px;
    width: 11px;
    padding-top: 5px;
    font-weight: lighter;
}

  @media (max-width: 1024px){
    body{font-size: 18px}
   .nav{
     width: 1024px;
   }
    } 

 @media (min-width: 1920px){
    body{font-size: 18px}
   .nav{
     width: 1920px;
   }
    } 

</style>

swiper 移动端鼠标轮播

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiperNav">
          <div class="swiperNavHead"   @click="openMenu()">
            <img src="../assets/img/menu.png" alt />
          </div>
          <div class="menu " v-show="menuFlag">
            <li class="swiper-pagination menuNav" ></li>
              <ul v-for="(item,index) of menuList" class="inMenuNav" @click="clickMenu(index)">
                 {{item}}
              </ul>
          </div>
        </div>Slide 1
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "../assets/swiper-bundle.min.js";
export default {
  data() {
      return {
          menuFlag:false,
          menuList:['首页','服务项目','客户案例','新闻资讯','联系我们']
      }
  },
  methods:{
     openMenu(){
          this.menuFlag = !this.menuFlag
      },
      clickMenu(e){
          console.log(e)
          //swiper-pagination-bullet-active
      }
  },
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      direction: "vertical",
      slidesPerView: 1,
      spaceBetween: 30,
      mousewheel: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>
 <style>
@import "../assets/swiper-bundle.min.css";
.inMenuNav{
  height: 40px;
  z-index: 1;
}
.menuNav{
  display: flex!important;
  flex-direction: column!important;
  width: 100%;
  align-items: center;
}
.menuNav span{
 
  width: 100%!important;
  height: 40px!important;
  border-radius: 0!important;
  background: #01318F!important;
  color: white;
  border: 2px solid red!important;
  opacity: 0!important;
}
.menuLi{
    color: white;
}
.menu{
    position: relative;
    margin-left: auto;
    width: 30%;
    height: 100vh;
    background-color: #01318F;
}
.swiperNav {
  width: 100%;
  height: 50px;
  background-color: #0a0f24 !important;
  position: absolute;
  top: 0;
}
.swiperNavHead {
  margin-left: auto;
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiperNavHead img {
  width: 35px;
  height: 35px;
}

.swiper-wrapper {
  height: 100vh !important;
}
.swiper-pagination,
.swiper-pagination-clickable,
.swiper-pagination-bullets {
  position: fixed !important;
}
.swiper-slide,
.swiper-slide-active html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>