专栏首页vue的实战2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

演示效果

自带引用bug.png

把Dn()函数注释掉即可.png

  • 安装
npm install vue-fullpage.js
  • 引用
// 引用fullpage 插件
import 'fullpage.js/vendors/scrolloverflow';
import VueFullPage from 'vue-fullpage.js';
Vue.use(VueFullPage);
  • 在组件中使用
  <full-page :options="options" ref="page">
<!--      第一屏-->
      <div class="section">
        <div class="box1">
          <div class="slide">
            section1
          </div>

        </div>
      </div>
<!--      第二屏-->
      <div class="section">
        <div class="box2">
          section2
        </div>
      </div>
      <div class="section">
        <div class="box3">
          section3
        </div>
      </div>
    </full-page>
  options: {

//           //为每个section设置背景色
//           sectionsColor: ["#f00","#0f0","#00f"],
// //用来控制slide幻灯片的箭头,设置为false,两侧的箭头会消失
//           controlArrows: false,
// //每一页幻灯片的内容是否垂直居中
//           verticalCentered: false,
// //字体是否随着窗口缩放而缩放
//           resize: true,
// //页面滚动速度
//           scrollingSpeed: 700,
// //定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面中任意的id和name相同
//           anchors: ["page1","page2","page3"],
// //是否锁定锚链接
//           lockAnchors: true,
// //定义section页面的滚动方式,需要引入jquery.easings插件
//           easing:,
// //是否使用css3 transform来实现滚动效果
//           css3: false,
// //滚动到最顶部后是否连续滚动到底部
//           loopTop: true,
// //滚动到最底部后是否连续滚动到顶部
//           loopBottom: true,
// //横向slide幻灯片是否循环滚动
//           loopHorizontal: false,
// //是否循环滚动,不会出现跳动,效果很平滑
//           continuousVertical: true,
// //是否使用插件滚动方式,设为false后,会出现浏览器自带的滚动条,将不会按页滚动
//           autoScrolling: false,
// //是否包含滚动条,设为true,则浏览器自带的滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效
//           scrollBar: true,
// //设置每个section顶部的padding,当我们要设置一个固定在顶部的菜单、导航、元素等时使用
//           paddingTop: "100px",
// //设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等时使用
//           paddingBottom: "100px",
// //固定的元素,为jquery选择器;可用于顶部导航等
//           fixedElements: ".nav",
// //是否可以使用键盘方向键导航
//           keyboardScrolling: false,
// //在移动设置中页面敏感性,最大为100,越大越难滑动
//           touchSensitivity: 5,
// //设为false,则通过锚链接定位到某个页面不再有动画效果
//           animateAnchor: false,
// //是否记录历史,可以通过浏览器的前进后退来导航
//           recordHistory: true,
// //绑定菜单,设定相关属性和anchors的值对应后,菜单可以控制幻灯片滚动
//           menu: '.nav',
// //是否显示导航,设为true会显示小圆点作为导航
//           navigation: true,
// //导航小圆点的位置,可以设置为left或者right
//           navigationPosition: right,
// //鼠标移动到小圆点上时显示出的提示信息
//           navigationTooltips: ["第一页","第二页","第三页"],
// //是否显示当前页面小圆点导航的提示信息,不需要鼠标移上
//           showActiveTooltip: true,
// //是否显示横向幻灯片的导航
//           slidesNavigation: true,
// //横向幻灯片导航的位置,可以为top或者bottom
//           slidesNavPosition: bottom,
// //内容超过满屏时是否显示滚动条,需要jquery.slimscroll插件
//           scrollOverflow: true,
// //section选择器
//           sectionSelector: ".section",
// //slide选择器
//           slideSelector: ".slide"


          licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
          afterLoad: this.afterLoad,
          scrollOverflow: true,
          navigation: true,//是否显示导航,默认为false
          navigationPosition: 'right',//导航小圆点的位置
          scrollBar: false,
          keyboardScrolling: false,//是否可以使用键盘方向键导航,默认为true
          continuousVertical: true, /// 是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置
          menu: '#menu',
          // navigation: true,
          // anchors: ['page1', 'page2', 'page3'],
          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
        }
  • 怎么调用api
 click() {
        // vue调用fullpapge的方法
        this.$refs.page.api.moveSectionDown();
        // moveSectionDown();
      }
  • 完整代码 如下
<template>
  <div>
    <button @click= "click" class=" cc"> 点击</button>
    <full-page :options="options" ref="page">
<!--      第一屏-->
      <div class="section">
        <div class="box1">
          <div class="slide">
            section1
          </div>

        </div>
      </div>
<!--      第二屏-->
      <div class="section">
        <div class="box2">
          section2
        </div>
      </div>
      <div class="section">
        <div class="box3">
          section3
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        options: {

//           //为每个section设置背景色
//           sectionsColor: ["#f00","#0f0","#00f"],
// //用来控制slide幻灯片的箭头,设置为false,两侧的箭头会消失
//           controlArrows: false,
// //每一页幻灯片的内容是否垂直居中
//           verticalCentered: false,
// //字体是否随着窗口缩放而缩放
//           resize: true,
// //页面滚动速度
//           scrollingSpeed: 700,
// //定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面中任意的id和name相同
//           anchors: ["page1","page2","page3"],
// //是否锁定锚链接
//           lockAnchors: true,
// //定义section页面的滚动方式,需要引入jquery.easings插件
//           easing:,
// //是否使用css3 transform来实现滚动效果
//           css3: false,
// //滚动到最顶部后是否连续滚动到底部
//           loopTop: true,
// //滚动到最底部后是否连续滚动到顶部
//           loopBottom: true,
// //横向slide幻灯片是否循环滚动
//           loopHorizontal: false,
// //是否循环滚动,不会出现跳动,效果很平滑
//           continuousVertical: true,
// //是否使用插件滚动方式,设为false后,会出现浏览器自带的滚动条,将不会按页滚动
//           autoScrolling: false,
// //是否包含滚动条,设为true,则浏览器自带的滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效
//           scrollBar: true,
// //设置每个section顶部的padding,当我们要设置一个固定在顶部的菜单、导航、元素等时使用
//           paddingTop: "100px",
// //设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等时使用
//           paddingBottom: "100px",
// //固定的元素,为jquery选择器;可用于顶部导航等
//           fixedElements: ".nav",
// //是否可以使用键盘方向键导航
//           keyboardScrolling: false,
// //在移动设置中页面敏感性,最大为100,越大越难滑动
//           touchSensitivity: 5,
// //设为false,则通过锚链接定位到某个页面不再有动画效果
//           animateAnchor: false,
// //是否记录历史,可以通过浏览器的前进后退来导航
//           recordHistory: true,
// //绑定菜单,设定相关属性和anchors的值对应后,菜单可以控制幻灯片滚动
//           menu: '.nav',
// //是否显示导航,设为true会显示小圆点作为导航
//           navigation: true,
// //导航小圆点的位置,可以设置为left或者right
//           navigationPosition: right,
// //鼠标移动到小圆点上时显示出的提示信息
//           navigationTooltips: ["第一页","第二页","第三页"],
// //是否显示当前页面小圆点导航的提示信息,不需要鼠标移上
//           showActiveTooltip: true,
// //是否显示横向幻灯片的导航
//           slidesNavigation: true,
// //横向幻灯片导航的位置,可以为top或者bottom
//           slidesNavPosition: bottom,
// //内容超过满屏时是否显示滚动条,需要jquery.slimscroll插件
//           scrollOverflow: true,
// //section选择器
//           sectionSelector: ".section",
// //slide选择器
//           slideSelector: ".slide"


          licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
          afterLoad: this.afterLoad,
          scrollOverflow: true,
          navigation: true,//是否显示导航,默认为false
          navigationPosition: 'right',//导航小圆点的位置
          scrollBar: false,
          keyboardScrolling: false,//是否可以使用键盘方向键导航,默认为true
          continuousVertical: true, /// 是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置
          menu: '#menu',
          // navigation: true,
          // anchors: ['page1', 'page2', 'page3'],
          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
        }
      }
    },
    methods: {

      click() {
        // vue调用fullpapge的方法
        this.$refs.page.api.moveSectionDown();
        // moveSectionDown();
      }
  // /向上滚动一页
  // moveSectionUp();
  // //向下滚动一页
  // moveSectionDown();
  // //滚动到第几页,第几个幻灯片;页面从1计算,幻灯片从0计算
  // moveTo(wection,slide);
  // //和moveTo一样,但是没有动画效果
  // silentMoveTo(section,slide);
  // //幻灯片向右滚动
  // moveSlideRight();
  // //幻灯片向左滚动
  // moveSlideLeft();
  // //动态设置autoScrolling配置项
  // setAutoScrolling(boolean);
  // //动态设置lockAnchors配置项
  // setLockAnchors(boolean);
  // //动态设置recordHistory配置项
  // setRecordHistory(boolean);
  // //动态设置scrollingSpeed配置项
  // setScrollingSpeed(milliseconds);
  // //添加或删除鼠标/滑动控制,第一个参数为启用、禁用;第二个参数为方向,取值包含all、up、dowm、left、right,可以使用多个,逗号分隔
  // setAllowScrolling(boolean,[directions]);
  // //销毁fullpage特效,不写type,fullpage给页面添加的样式和html元素还在;如果使用all,则样式和html等全部被销毁
  // destroy(type);
  // //重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果
  // reBuild();



    }
  }
</script>

<style scoped>
  div {
    margin: 0;
    padding: 0;
  }
  .cc {

  }

</style>
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/1bf63112f408复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Vue 项目之 Webpack 中 PostCSS 工具的使用(1)

    前面我们已经讲了 webpack 对 css、less 文件的处理,和处理 less 文件类似,处理 sass、stylus 也只需安装对应的工具再进行配置即可...

    玖柒的小窝
  • Vue 开源项目 TOP45

    在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高。2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注。本文将为...

    grain先森
  • vue 项目中从session中获取对象,并且使用里面的属性

    django后端传给前段一个json对象,vue接收后如何保存在session中,并且可以在其他的页面从session中拿出对象,用这个对象里面的属性

    一天不写程序难受
  • 删库不跑路!我含泪写下了 MySQL 数据恢复大法…

    点击关注公众号,Java干货及时送达 作者:程淇铭 来源:segmentfault.com/a/1190000020116271 日常工作中,总会有因手抖、写...

    Java技术栈
  • 删库不必跑路!详解 MySQL 数据恢复

    日常工作中,总会有因手抖、写错条件、写错表名、错连生产库造成的误删库表和数据的事情发生。但是,如果每次删库都跑路的话,怕是再也不好找工作了吧!所以,删库跑路不是...

    dys
  • 删库不跑路:论MySQL数据恢复

    日常工作中,总会有因手抖、写错条件、写错表名、错连生产库造成的误删库表和数据的事情发生,那么,如果连数据都恢复不了,还要什么 DBA。

    JavaFish
  • TRTC学习之旅(四)-- 用electron实现视频聊天室

    前面我们已经学习过在web端用TRTC实时音视频SDK实现了多人会议室和互动直播模式,今天我们学习一下在桌面应用层用electron实现视频聊天。

    黑眼圈云豆
  • 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ? ESLint是一个语法规则和代码风格的检查工具。 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https:...

    闰土大叔
  • Win10下配置机器学习python开发环境

    由于历史原因,python长期存在两个版本,python 2和python 3,而且存在兼容问题。虽然经过开发者不断的努力,普遍转向Python 3,但Pyth...

    云水木石
  • Nvue/Weex

    WindrunnerMax
  • Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由

    2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。

    FungLeo
  • 5. vue常用高阶函数及综合案例

    在上面的demo中, 我们全部都是使用循环来进行计算, 并且最后达到了我们想要的效果. 点击计算按钮, 查看计算结果:

    用户7798898
  • 谈一谈|个人博客网站开发记录二

    (https://mp.weixin.qq.com/s/oCNcDHHw3ex8XB5-XmlbaA)

    算法与编程之美
  • SpringBoot+Vue(二)ES6模块化、SPA-Vue企业级开发和Vue全家桶

    1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景

    ChinaManor
  • 【Node】Volta 自动管理Node 及工具版本

    最近我们团队推行这个工具,所以我也介绍给大家,本文非常简单,只涉及到几条命令而已就能轻松掌握这个工具。

    神仙朱
  • Vue学习笔记之vue-cli脚手架安装和webpack-simple模板项目生成

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

    Jetpropelledsnake21
  • ant-design-vue运行时动态切换主题色

    由于ant-design-vue的样式使用的是less作为开发语言,所以这里我们选择Less

    青年码农

扫码关注腾讯云开发者

领取腾讯云代金券