• 关于Vue中,fullpage全屏滚动插件的使用方法


    一、 安装插件

    npm install --save vue-fullpage.js

    二、 全局导入,在main.js中

    import 'fullpage.js/vendors/scrolloverflow'
    
    import VueFullPage from 'vue-fullpage.js/dist/vue-fullpage.js'
    
    Vue.use(VueFullPage)

    三、 在页面中使用

    fullpage(:options="options", ref="fullpage")
        .sections
            // 第一页
            .section
            // 第二页
            .section
            // 第三页
            .section

    其中options为fullpage的配置项,在data中声明

    options: {
            licenseKey: null,
            afterLoad: this.afterLoad,
            controlArrows: true
          }

    其中afterLoad为滚动某一页后的回调函数,可在其中定义一些操作

    afterLoad (anchors, item) {
        }

     常用配置项options如下:

    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'
            ]
          }
        }

    还可以通过this.$refs.fullpage.api 来调用插件的api

    this.$refs.fullpage.init()
    this.$refs.fullpage.api.setAllowScrolling(false)

    常用api如下:

    // 向上滚动一页
    // 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();

    参考文章:https://www.cnblogs.com/mybilibili/p/12263820.html

  • 相关阅读:
    Indexed DB入门导学(1)
    移动端touch事件封装
    javascript实现仿微信抢红包
    NODE学习:利用nodeJS去抓网页的信息
    ajax跨域请求无法携带cookie的问题
    四则运算
    wc
    我的问题
    css3新增加的属性
    css知识点回顾(一)
  • 原文地址:https://www.cnblogs.com/jane2160/p/12718417.html
Copyright © 2020-2023  润新知