开源软件名称：

mv-full-page

开源软件地址：

https://gitee.com/null_639_5368/v-full-page

开源软件介绍：

mv-full-page

兼容PC、移动端(微信公众号) 全屏滚动组件

如果觉得还不错, star一下项目, 也可以在网页底部捐赠给作者一杯咖啡钱,Thanks♪(･ω･)ﾉ。

另外：如果你的项目用到了此组件，可以提交你的网址进行展示。

npm version downloads Jsdelivr Hits

其他版本

Vue2版本请移步2.0分支

安装

npm i mv-full-page@next

或

yarn add mv-full-page@next

全局注册

import { createApp } from 'vue';import MvFullPage from 'mv-full-page'import 'mv-full-page/dist-lib/style.css'const app = createApp();app.use(MvFullPage);

局部注册

import { defineComponent } from "vue";import MvFullPage from 'mv-full-page'import 'mv-full-page/dist-lib/style.css'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>

Nuxt3

示例代码

演示

Demo

功能点

移动端触摸滑动
pc端鼠标滚轮切换
支持页面缓存
解决 ios 滑动页面回弹
支持滚动方向切换
支持局部滚动（处理了微信公众号局部元素滚动回弹的问题）
支持自定义滚动容器定位方式和容器大小
指示器切换页面
支持自定义过渡动画速度
支持响应式窗口大小改变
支持动态插槽
支持 typescript

Props

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

配置

{    /**     * 定位模式     */    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:指示器对应索引})`