vue实现全屏滚动效果（非fullpage.js）_vue-fullpage.js

vue

全屏滚动

179 浏览量更新于2023-03-16 评论收藏 50KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue实现全屏滚动效果（非实现全屏滚动效果（非fullpage.js））

主要为大家详细介绍了vue实现全屏滚动效果，非fullpage.js，文中示例代码介绍的非常详细，具有一定的参考

价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现全屏滚动效果（的具体代码，供大家参考，具体内容如下

是什么是什么

网页的一个页面占据一屏的宽高，多个页面上下或者左右拼接在一起。当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应

的页面。

此次只实现鼠标滚动此次只实现鼠标滚动

实现原理实现原理

使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件，当鼠标上下的滚动的时候，当前的页面transformY(屏高)或

者transformX(屏宽)

代码实现代码实现

HTML

<div

class="fullPageContainer"

ref="fullPageContainer"

@mousewheel="mouseWheelHandle" //监听鼠标事件

@DOMMouseScroll="mouseWheelHandle" // 监听鼠标事件

</div>

</template>

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的元素

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38713039

粉丝: 6
资源: 948

会员权益专享

vue实现全屏滚动效果（非fullpage.js）

评论0

会员权益专享

最新资源

vue实现全屏滚动效果（非fullpage.js）

评论0

使用vue制作FullPage页面滚动效果

fullpage全屏响应式手机导航菜单

vue实现整屏滚动切换

vue使用fullpage.js

vue3实现全屏滚动效果

vue3 使用fullpage.js

vue2 中使用fullpage.js

fullpage.js配合vue

vue-fullpage.js

fullpage.js 初始化Uncaught (in promise) TypeError: Cannot read properties of null (reading 'item')报错

vue.js和vue.min.js下载

如何在vue中使用这个方法

vue.js和vue.min.js资源文件下载

我的vue项目中只有babel.config.js没有vue.config.js

vue项目如何设置默认使用vue.min.js

vue.config.js和webpack.config.js区别

为什么vue.js没用vue.min.js 有用

在spring boot怎么找到vue项目的根目录的vue.config.js

vue-video-player和video.js区别

vue项目中没有vue.config.js文件

会员权益专享

最新资源