vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

目录
  • 一、man.js引入
  • 二、使用
  • 三、常用API

直播平台源码，vue+vue-fullpage实现整屏滚动页面

一、man.js引入

// An highlighted block
import router from './router'
Vue.config.productionTip = false
// 整屏滚动
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

二、使用

1.html，

<template>
 <div>
  <full-page :options="options" id="fullpage" ref="fullpage">
   <div >
    <h3>vue-fullpage.js</h3>
   </div>
   <div >
    <div >
     <h3>Slide 2.1</h3>
    </div>
    <div >
     <h3>Slide 2.2</h3>
    </div>
    <div >
     <h3>Slide 2.3</h3>
    </div>
   </div>
   <div >
    <h3>Section 3</h3>
   </div>
  </full-page>
 </div>
</template>

2.js

export default {
 data() {
  return {
   options: {
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回调函数
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
  };
 },
}

三、常用API

1.afterLoad:对应的函数写在methods中，常用作对页面的处理

methods:{
afterLoad: function (origin, destination, direction) {
    // origin 起点 destination终点 direction方向 固定写法
   this.navIndex = destination.index;
   //destination.index代表对应页面index(从0开始)
   //拿到对应页面的index就可以进行操作
   if (destination.index > 0) {
    this.phoneShow = true;
   }
   if (destination.index === 0) {
    this.phoneShow = false;
   }
  },
}

2.moveTo通过事件跳转到对应的page页面

 options: {
    afterLoad: this.afterLoad,
    //一定要在options中插入这段数组，数组的值对应page页面
    anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],
    licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
    afterLoad: this.afterLoad, // method中的方法 即回调函数
    scrollOverflow: true,
    scrollBar: false,
    menu: "#menu",
    sectionsColor: [
     "#23A84A",
     "#ff5f45",
     "#0798ec",
     "#fec401",
     "#000000",
     "#E7EFFE",
    ],
   },
moveTo(pages) {
//固定写法,第一个参数代表options中anchors数组中的值
//在点击时传递对应的pages值即可
   fullpage_api.moveTo(pages, 1);
  },

到此这篇关于vue+vue-fullpage实现整屏滚动页面的文章就介绍到这了,更多相关vue整屏滚动页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现整屏滚动切换

    本文实例为大家分享了vue实现整屏滚动切换的具体代码,供大家参考,具体内容如下 1.下载vue-awesome-swiper npm i vue-awesome-swiper -S 2.在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(vueAwesomeSwiper); 3.直接上案例,新建一个路由页面 <template> <div class="hello-world">

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

    本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下 是什么 网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起.当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面. 此次只实现鼠标滚动 实现原理 使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <template> <div class=&qu

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

    前言 已经有好久没有更新博客了,大三下了要准备找实习了,才发现自己很多东西都不会,所以赶紧找了个现在流行的MVVM框架学习一下.我学习的是Vue,所以拿Vue写了一个FullPage的模板,可以供自己和其他人使用. 项目的地址是:https://github.com/hzxszsk/vue-fullpage 项目讲解 为了加深理解,我把我制作这个FullPage页面的思路和流程记录下来,也可以给其他和我一样的初学者一个参考. 分解思路 首先,我根据Vue的组件开发思想,把这个FullPage页面

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • vue+vue-fullpage实现整屏滚动页面的示例代码(直播平台源码)

    目录 一.man.js引入 二.使用 三.常用API 直播平台源码,vue+vue-fullpage实现整屏滚动页面 一.man.js引入 // An highlighted block import router from './router' Vue.config.productionTip = false // 整屏滚动 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • vue实现消息的无缝滚动效果的示例代码

    朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • vue项目初始化到登录login页面的示例

    如下所示: export default new Router({ routes: [ { path: '/', redirect:'/login', }, { path: '/login', alias:'/accounts/login', name: '登录', component: () => import('@/views/accounts/login') } ] `` 嗯 就这样写就可以啦 我向来都是简单粗暴~~ 以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全

  • vue ssr+koa2构建服务端渲染的示例代码

    之前做了活动投放页面在百度.360等渠道投放,采用 koa2 + 模版引擎的方式.发现几个问题 相较于框架开发页面效率较低,维护性差 兼容性问题,在页面中添加埋点后发现有些用户的数据拿不到,排查后发现通过各个渠道过来的用户的设备中仍然包含大量低版本的浏览器. 服务端渲染 服务端渲染和单页面渲染区别 查看下面两张图,可以看到如果是服务端渲染,那么在浏览器中拿到的直接是完整的 html 结构.而单页面是一些 script 标签引入的js文件,最终将虚拟dom去挂在到 #app 容器上. @vue/c

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • vue 使用class创建和清除水印的示例代码

    页面添加水印的方法有很多,以下举例使用class定义的方法进行水印内容渲染: 1.新建文件:WatermarkClass.js export default class WatermarkClass { constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) { th

  • vue实现树形结构增删改查的示例代码

    vue实现树形结构增删改查的示例代码

    其实很多公司都会有类似于用户权限树的增删改查功能,正好最近我刚写了一个树形结构的增删改,在这里和大家分享一下,如果有不合理的地方欢迎评论,我会尽快优化~~ 先附上一下效果图 这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的. 这个是点击了编辑之后,显示节点的编辑按钮 点击最上面的添加按钮,显示最外层父节点的添加画面 修改节点名称 因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制.(v-if:该组件不存在,v-

随机推荐