vue全屏滑动组件(移动端、PC端(鼠标滚轮滑动)都已

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

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

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

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

{ /** * 定位模式 */ 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

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

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