代码拉取完成,页面将自动刷新
同步操作将从 Maybe/mv-full-page 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
兼容PC、移动端(微信公众号) 全屏滚动组件
如果觉得还不错, star一下项目, 也可以在网页底部捐赠给作者一杯咖啡钱,Thanks♪(・ω・)ノ。
另外: 如果你的项目用到了此组件,可以提交你的网址进行展示。
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>
移动端触摸滑动
pc端鼠标滚轮切换
支持页面缓存
解决 ios 滑动页面回弹
支持滚动方向切换
支持局部滚动(处理了微信公众号局部元素滚动回弹的问题)
支持自定义滚动容器定位方式和容器大小
指示器切换页面
支持自定义过渡动画速度
支持响应式窗口大小改变
支持动态插槽
支持 typescript
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,
},
}
name | 说明 | 回调参数 |
---|---|---|
rollEnd | 滚动页面后触发 | (page:滚动后的页码) |
pointerMouseover | 指示器mouseover事件和指示器索引 | ({event:事件,index:指示器对应索引}) |
name | 说明 | 参数 |
---|---|---|
goPage | 手动跳转页面 | (page:页码,quiet:是否静态跳转) => void |
name | 类型 | 默认值 | 备注 |
---|---|---|---|
data-scroll | Boolean | false | 局部滚动一定要在滚动容器添加这个属性 <div data-scroll="true"></div> |
![]() Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
---|---|---|---|
Edge | last 2 versions | last 2 versions | last 2 versions |
优先处理问题,以及定制化方案
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。