mv-full-page
兼容PC、移动端(微信公众号) 全屏滚动组件
喜欢的帮忙给个 star, 只要有时间就更新和优化
其他版本
Vue2版本请移步2.0分支
演示
Demo
安装
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" ><!-- 动态插槽 --><templatev-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>
功能点
移动端触摸滑动
pc端鼠标滚轮切换
支持页面缓存
解决 ios 滑动页面回弹
支持滚动方向切换
支持局部滚动（处理了微信公众号局部元素滚动回弹的问题）
支持自定义滚动容器定位方式和容器大小
指示器切换页面
支持自定义过渡动画速度
支持响应式窗口大小改变
支持动态插槽
支持 typescript
Props
配置
{/*** 定位模式*/position: "fixed",/*** 自定义容器宽度*/width: "100%",/*** 自定义容器高度*/height: "100%",/*** v => 垂直方向 ， h => 水平方向*/direction: "h",/*** 指示器*/poi: {/*** 显示指示器*/pointer: true,/*** 指示器位置*/position: "right",/*** 指示器类名*/className: ""},/*** 缓存页面*/cache: true,/*** 页面背景数组* 示例格式: [{ color:'pink' },{ image:'https://xxx.png' }]*/bgArr: [],/*** 自定义过渡动画*/transition: {duration: "1000ms", // 动画时长timingFun: "ease", // 动画速度曲线delay: "0s", // 动画延迟},// 自动播放autoPlay: false,// 循环播放loop: false,// 切换间隔interval: 1000,arrow: {// 上一页箭头last: false,// 下一页箭头next: false,},}
