基于Vue丝滑全屏滚动组件MV-Full-Page

Vedu • 2020-10-15 06:37 • 资源分享 • 阅读 3319

今天给大家分享一个超不错的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">4div>
      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>

组件属性

最后贴上示例及项目地址链接。

# 演示地址
http://null_639_5368.gitee.io/v-full-page

# gitee地址
https://gitee.com/null_639_5368/v-full-page

好了，就介绍到这里。如果大家有其它优秀Vue滚屏组件，欢迎一起交流分享！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/12532.html

基于Vue丝滑全屏滚动组件MV-Full-Page

特性

安装

使用插件

相关推荐

发表评论