vue 整屏滚动(轮播)

最新推荐文章于 2024-05-14 12:04:58 发布
最新推荐文章于 2024-05-14 12:04:58 发布
阅读量3.4k 收藏 12
点赞数 3
分类专栏： vue 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leng0920/article/details/107958162
版权

效果图:

 

如果不想显示小圆点,则注释掉id为pageUl的容器即可 

<template>

    <div id="wrap" :style="{ height: screenHeight + 'px' }">

        <div id="main" :style="{ top: nowTop + 'px' }">

            <ul id="pageUl" type="circle">

                <li  @click="navTo(1,$event)" id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}">&nbsp;</li>

                <li  @click="navTo(2,$event)" id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>

                <li  @click="navTo(3,$event)" id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>

                <li  @click="navTo(4,$event)" id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>

                <li  @click="navTo(5,$event)" id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>

            </ul>

            <div style="background-color: #1b6d85;font-size:46px;color:#fff;text-align: center" id="page1" class="page">1</div>

            <div style="background-color: #5cb85c;font-size:46px;color:#fff;text-align: center" id="page2" class="page">2</div>

            <div style="background-color: #8a6d3b;font-size:46px;color:#fff;text-align: center" id="page3" class="page">3</div>

            <div style="background-color: #337ab7;font-size:46px;color:#fff;text-align: center" id="page4" class="page">4</div>

            <div style="background-color: #66512c;font-size:46px;color:#fff;text-align: center" id="page5" class="page">5</div>

        </div>

    </div>

</template>



<script>

    

    export default {

        name: 'index',

        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:{

                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.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: blue;

    }

</style>

改了样式的

<template>
  <div id="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ top: nowTop + 'px' }">
      <div id="pageUl">
        <div class="aaa">
          <ul type="circle">
            <li
              @click="navTo(1,$event)"
              class="rightTreeText"
              :class="{'textActive': curIndex == 1}"
            >1</li>
            <li
              @click="navTo(2,$event)"
              class="rightTreeText"
              :class="{'textActive': curIndex == 2}"
            >2</li>
            <li
              @click="navTo(3,$event)"
              class="rightTreeText"
              :class="{'textActive': curIndex == 3}"
            >3</li>
            <li
              @click="navTo(4,$event)"
              class="rightTreeText"
              :class="{'textActive': curIndex == 4}"
            >4</li>
            <li
              @click="navTo(5,$event)"
              class="rightTreeText"
              :class="{'textActive': curIndex == 5}"
            >5</li>
          </ul>
          <div class="homeLine"></div>
          <ul type="circle">
            <div
              @click="navTo(1,$event)"
              class="whiteRoundBorder"
              :class="{'active': curIndex == 1}"
            >
              <li class="whiteRound"></li>
            </div>
            <div
              @click="navTo(2,$event)"
              class="whiteRoundBorder"
              :class="{'active': curIndex == 2}"
            >
              <li class="whiteRound"></li>
            </div>
            <div
              @click="navTo(3,$event)"
              class="whiteRoundBorder"
              :class="{'active': curIndex == 3}"
            >
              <li class="whiteRound"></li>
            </div>
            <div
              @click="navTo(4,$event)"
              class="whiteRoundBorder"
              :class="{'active': curIndex == 4}"
            >
              <li class="whiteRound"></li>
            </div>
            <div
              @click="navTo(5,$event)"
              class="whiteRoundBorder"
              :class="{'active': curIndex == 5}"
            >
              <li class="whiteRound"></li>
            </div>
          </ul>
        </div>
      </div>
      <div
        style="background-color: #1b6d85;font-size:46px;color:#fff;text-align: center"
        id="page1"
        class="page"
      >1</div>
      <div
        style="background-color: #5cb85c;font-size:46px;color:#fff;text-align: center"
        id="page2"
        class="page"
      >2</div>
      <div
        style="background-color: #8a6d3b;font-size:46px;color:#fff;text-align: center"
        id="page3"
        class="page"
      >3</div>
      <div
        style="background-color: #337ab7;font-size:46px;color:#fff;text-align: center"
        id="page4"
        class="page"
      >4</div>
      <div
        style="background-color: #66512c;font-size:46px;color:#fff;text-align: center"
        id="page5"
        class="page"
      >5</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: {
    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.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;
    }
 ul,li{
   list-style: none;
 }
#wrap {
  overflow: hidden;
  width: 100%;
}
.homeLine {
  width: 0.01rem;
  height: 4.86rem;
  background: linear-gradient(
    244deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  margin: 0 10px;
}
#main {
  position: relative;
  transition: top 1.5s;
}

.page {
  /*谨删*/
  width: 100%;
  margin: 0;
}

#pageUl {
  position: fixed;
  right: 10px;
  bottom: 50%;
}
.aaa {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* 页面样式 */
.whiteRoundBorder {
  padding: 5px;
  border: 1px solid red transparent;
  margin-bottom: 10px;
}
.whiteRound {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
}
.active {
  border: 1px solid rgba(255, 255, 255, 1);
}
.rightTreeText {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 7px;
}

.textActive {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
</style>

 

参考:https://blog.csdn.net/Lccccb/article/details/104671115

       https://blog.csdn.net/daddykei/article/details/107675114

性野喜悲
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue实现整屏滚动切换
12-28
本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
vue2简单封装轮播图组件
03-20
轮播图组件，实现左右滑动，自动无限无缝轮播，点击事件
2024年Web前端最全vue实现全屏滚动，非fullpage，销售面试问题及答案
2401_84620100的博客
05-11 316
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】// 执行切换},// 为了防止滚动多页，需要通过一个变量来控制是否滚动//执行滚动setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁}, 1010);},//获取屏幕的宽度// 获取执行tarnsform的元素。
Vue---轮播图的使用
weixin_52053631的博客
05-21 686
通过watch监听bannerList属性的属性值的变化，handler函数执行，只能保证bannerList数据已经有了，但是无法保证v-for已经执行结束，v-for执行完毕，才有结构，所以通过 $nextTick 可以实现。4.代码如下：通过 watch 和 $nextTick 实现。注意：在new Swiper实例之前，页面中结构必须加载完。s" //引入Swiper样式---轮播图。//引入Swiper。
2024年最全vue实现全屏滚动，非fullpage(1)，阿里电子面单
最新发布
2401_84435700的博客
05-14 141
1.webpack打包文件体积过大？（最终打包为一个js文件）2.如何优化webpack构建的性能。4.Vue的SPA 如何优化加载速度。5.移动端300ms延迟。3.移动端的性能优化。
vue实现tab切换+模糊搜索+轮播联动
爱吃水果和蔬菜__yaya的博客
08-26 804
##vue实现tab切换+模糊搜索+轮播联动
vue实现轮播图详解
蓑笠翁
10-04 1万+
vue实现轮播图效果，vant使用轮播图效果，实现图片轮播效果详解。
vue swiper多屏轮播
NRapid&JRapid
05-25 251
【代码】vue swiper多屏轮播。
vue实现无缝滚动组件，排名，统计等轮播
qq_52767081的博客
11-14 853
vue2实现的排名，数据，统计图的无缝向上滚动，类似轮播
vue移动端轮播图（触摸滑动滚动、自动轮播、无缝滚动、循环无回滚）
02-11
基于vue实现移动端轮播图，主要功能手指触摸滑动滚动、自动轮播、无缝滚动、循环无回滚等。图片切换有过渡效果。适合前端初学者学习。欢迎有疑问的小伙伴私聊提问哦。
vue实现轮播图（滚动切换，无缝切换，自动切换，循环无回滚等）
02-10
vue实现轮播图，实现滚动切换，无缝切换，自动切换，循环无回滚，暂停滚动等效果。适合初学者学习借鉴。对代码有疑问或者不懂的欢迎私信交流。
Swiper全屏自适应图片轮播代码.zip
07-04
Swiper全屏自适应图片轮播代码是一款基于Swiper扩展的全屏响应式图片滚动切换代码。
带缩略图轮播效果（全屏切换）
12-17
插件描述：点击缩略图或点击缩略图左右按钮进行切换. 参考示例：http://www.jq22.com/jquery-info5141
Scrollify全屏滚动插件demo(整合翻页，背景墙，导航栏等功能)
10-17
Scrollify全屏滚动插件demo(整合翻页，背景墙，导航栏等功能)
vue表格自动滚动
01-08
npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden...
基于vue.js实现图片轮播效果
10-20
主要为大家详细介绍了基于vue.js实现图片轮播效果，vue如何实现轮播图效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应
银鞍照白马的博客
10-22 9854
如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/ 如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数，文档。可以参考。地址：轮子工厂 安装 npm install -S vue-carousel-3d 调用 1、全局注册，main.js import Vue from 'vue' import Carousel3d from 'vue-carousel-3d.
vue无缝循环轮播
qq_43519131的博客
08-18 860
在网上看了几个无缝循环轮播的实现方法，使用方法都比较复杂，所以这里提供一种比较简单的实现方式。
vue实现轮播图（跑马灯、无缝滚动、无限切换效果）
热门推荐
m0_59224033的博客
09-03 2万+
vue实现轮播图（跑马灯、无缝滚动、无限切换、淡入淡出等轮播图效果），简简单单，复制粘贴，开箱即用，不依赖第三方插件、组件。
vue3,音频循环播放
12-11
要在Vue3中实现音频循环播放，可以使用`<audio>`标签和Vue的`watch`属性来监听`isPlay`的变化。具体步骤如下： 1.在`<audio>`标签中添加`loop`属性，以实现循环播放。 2.在Vue组件中添加`watch`属性，监听`isPlay`的变化。 3.在`isPlay`的回调函数中，根据`isPlay`的值来控制音频的播放和暂停。 4.在`created`生命周期钩子函数中，为`<audio>`标签添加`ended`事件监听器，以便在音频播放结束时重新播放。 下面是一个示例代码： ```html <template> <div> <audio ref="audio" :src="currentSongUrl" loop></audio> <button @click="togglePlay">{{ isPlay ? '暂停' : '播放' }}</button> </div> </template> <script> export default { data() { return { isPlay: false, currentSongUrl: 'your-audio-url' } }, watch: { isPlay(val) { if (val) { this.$refs.audio.play() } else { this.$refs.audio.pause() } } }, created() { this.$refs.audio.addEventListener('ended', () => { this.$refs.audio.currentTime = 0 this.$refs.audio.play() }) }, methods: { togglePlay() { this.isPlay = !this.isPlay } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值