Mv-full-page NPM

其他版本

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:指示器对应索引})`