其他版本

Vue2版本请移步2.0分支

安装

npm i mv-full-page

或

yarn add mv-full-page

全局注册

import { createApp } from 'vue';
import MvFullPage from 'mv-full-page'
import "../node_modules/mv-full-page/dist-lib/style.css"; // 用相对路径引用css 兼容webpack和vite

const app = createApp();

app.use(MvFullPage);

局部注册

import { defineComponent } from "vue";
import MvFullPage from 'mv-full-page'
import "../node_modules/mv-full-page/dist-lib/style.css"; // 用相对路径引用css 兼容webpack和vite

export default defineComponent({
    components:{
        MvFullPage
    }
});

示例代码

基本使用

跳转

动态插槽

   <mv-full-page   
    :pages="list.length"
    :v-model:page="page" 
    >
      <!-- 动态插槽 -->
      <template
        v-slot:[dynamicSlotName+(index+1)]
        v-for="(item, index) in list"
      >
        <div :class="`page${index + 1}`" :key="index">
          {{ `页面${JSON.stringify(item)}` }}
        </div>
      </template>
    </mv-full-page>

异步请求配置

<!-- 如果配置需要异步获取建议大家用v-if="isInit" 来判断是否开始渲染组件,自己可以根据情况做一个loading 或者文本提示进行等待组件渲染 -->
    <mv-full-page v-if="isInit" ref="myFullPage" :pages="pages" v-model:page="page" :config="config"
      @rollEnd="onRollEnd" @pointerMouseover="pointerMouseover">
    </mv-full-page>
    <p v-else style="font-size: 30px;text-align:center;padding: 30px;color: #656565;">加载中...</p>
  

Nuxt3

示例代码

演示

Demo

功能点

• 移动端触摸滑动

• pc端鼠标滚轮切换

• 支持页面缓存

• 解决 ios 滑动页面回弹

• 支持滚动方向切换

• 支持局部滚动（处理了微信公众号局部元素滚动回弹的问题）

• 支持自定义滚动容器定位方式和容器大小

• 指示器切换页面

• 支持自定义过渡动画速度

• 支持响应式窗口大小改变

• 支持动态插槽

• 支持 typescript

Props

| name | 类型 | 默认值 | 备注 | | -------------------- | ------- | ------ | ---------- | | pages | Number | 1 | 页面总数 | | page: v-model:page | Number | 1 | 当前页面 | | config | Object | - | 详情见配置 | | loading | Boolean | - | 加载中 |

配置

{
    /**
     * 禁用滚动
     */
    disabled: false,
    /**
     * 定位模式
     */
    position: "fixed",
    /**
     * 自定义容器宽度
     */
    width: "100%",
    /**
     * 自定义容器高度
     */
    height: "100%",
    /**
     *  v => 垂直方向 ， h => 水平方向
     */
    direction: "h",
    poi: {
      /**
       * 显示指示器
       */
      pointer: true,
      /**
       * 指示器位置
       */
      position: "right",
    },
    /**
     * 缓存页面
     */
    cache: true,
    /**
     * 页面背景数组
     * @example [{color:'green',image:'http://...'}]
     */
    bgArr: [],
    /**
     * 背景图片属性配置
     */
    bgConfig: {
      fit: "cover",
    },
    /**
     * 自定义过渡动画
     */
    transition: {
      duration: "1000ms", // 动画时长
      timingFun: "ease", // 动画速度曲线
      delay: "0s", // 动画延迟
    },
    //  循环播放
    loop: false,
    arrow: {
      // 上一页箭头
      last: false,
      // 下一页箭头
      next: false,
    },
    // 自动播放
    autoPlay: {
      play: false,
      // 切换间隔
      interval: 1000,
    },
}

Events

| name | 说明 | 回调参数 | | ---------------- | ------------------------------- | ------------------------------------- | | rollEnd | 滚动页面后触发 | (page:滚动后的页码) | | pointerMouseover | 指示器mouseover事件和指示器索引 | ({event:事件,index:指示器对应索引}) |

Ref

| name | 说明 | 参数 | | ------ | ------------ | ---------------------------------------- | | goPage | 手动跳转页面 | (page:页码,quiet:是否静态跳转) => void |

局部滚动 div

| name | 类型 | 默认值 | 备注 | | ----------- | ------- | ------ | --------------------------------------------------------------------- | | data-scroll | Boolean | false | 局部滚动一定要在滚动容器添加这个属性 <div data-scroll="true"></div> |

Browsers support

| Edge | Firefox | Chrome | Safari | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge | last 2 versions | last 2 versions | last 2 versions |

展示

• 演示网页
• .....

赞助

优先处理问题，以及定制化方案