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

一、man.js引入，

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

二、使用

1.html，

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

2.js

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

三、常用API

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

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

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

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

以上就是直播平台源码，vue+vue-fullpage实现整屏滚动页面，更多内容欢迎关注之后的文章