phpcore_lib_page技巧_基于 Vue 丝滑全屏滚动组件MVFullPage

文章目录 [+]

mv-full-page 一款基于vue2.x构建的屏幕滑动组件。
兼容移动端、PC端（鼠标滚轮滑动），支持局部页面动画。

特性PC端鼠标滚轮切换(水平/垂直)移动端触摸滑动(水平/垂直)页面切换动画重置自定义animate动画支持 ts支持组件内局部滚动支持自定义容器定位及容器大小兼容 IE、Chrome、Firefox安装

$ npm i mv-full-page -S利用插件

<template> <div class="app"> <mv-full-page :isPointer="true" pointerPos="left" :isV="isV" :pages="4" :page.sync="currentPage" :bgArr="bgArr" :isCache="false" > <template #page1> <div class="page1"> <h3>mv-full-page一款兼容PC端移动真个Vue滑动组件</h3> <p v-animate="{name: 'bounceInLeft',}">页面1 第一个动画</p> <p v-animate="{name: 'bounceInLeft',delay: 500,}">页面1 第二个动画</p> <button @click="isV = !isV">切换滑动方向(默认垂直方向)</button> </div> </template> <template #page2> <div class="page2"> <p class="block" style="margin-top:250px;" v-animate="{ name: 'bounceInUp', }" >页面2 第一个动画</p> </div> </template> <template #page3> <div class="page3"> <p class="block" v-animate="{ name: 'bounceInRight', }" >页面3 第一个动画</p> </div> </template> <template #page4> <div class="page4">4</div> </template> </mv-full-page> </div></template><script>import MvFullPage from 'mv-full-page'import 'mv-full-page/lib-dist/mv-full-page.css'export default { name: "home", components: { MvFullPage }, data() { return { isV: true, currentPage: 1, bgArr: [ { isBg: true, src: require("@/assets/bg_img_1.jpg") }, { isBg: true, src: require("@/assets/bg_img_2.jpg") }, { isBg: true, src: require("@/assets/bg_img_3.jpg") }, { isBg: true, src: require("@/assets/bg_img_4.jpg") } ] }; }};</script>

组件属性

phpcore_lib_page技巧_基于 Vue 丝滑全屏滚动组件MVFullPage