没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论

















vue实现全屏滚动效果(非实现全屏滚动效果(非fullpage.js))
主要为大家详细介绍了vue实现全屏滚动效果,非fullpage.js,文中示例代码介绍的非常详细,具有一定的参考
价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下
是什么是什么
网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应
的页面。
此次只实现鼠标滚动此次只实现鼠标滚动
实现原理实现原理
使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或
者transformX(屏宽)
代码实现代码实现
HTML
<template>
<div class="fullPage" ref="fullPage">
<div
class="fullPageContainer"
ref="fullPageContainer"
@mousewheel="mouseWheelHandle" //监听鼠标事件
@DOMMouseScroll="mouseWheelHandle" // 监听鼠标事件
>
<div class="section section1">1</div>
<div class="section section2">2</div>
<div class="section section3">3</div>
<div class="section section4">4</div>
</div>
</div>
</template>
JS
<script>
export default {
name: "Home",
data() {
return {
fullpage: {
current: 1, // 当前的页面编号
isScrolling: false, // 是否在滚动,是为了防止滚动多页,需要通过一个变量来控制是否滚动
deltaY: 0 // 返回鼠标滚轮的垂直滚动量,保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
}
};
},
methods: {
next() { // 往下切换
let len = 4; // 页面的个数
if (this.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数,则可以执行向下滑动
this.fullpage.current += 1; // 页面+1
this.move(this.fullpage.current); // 执行切换
}
},
pre() {// 往上切换
if (this.fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0,则可以执行向下滑动
this.fullpage.current -= 1;// 页面+1
this.move(this.fullpage.current);// 执行切换
}
},
move(index) {
this.fullpage.isScrolling = true; // 为了防止滚动多页,需要通过一个变量来控制是否滚动
this.directToMove(index); //执行滚动
setTimeout(() => { //这里的动画是1s执行完,使用setTimeout延迟1s后解锁
this.fullpage.isScrolling = false;
}, 1010);
},
directToMove(index) {
let height = this.$refs["fullPage"].clientHeight; //获取屏幕的宽度
let scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
资源评论


weixin_38713039
- 粉丝: 6
- 资源: 948
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制
