https://github.com/maybeqhl/mv-full-page
vue全屏滑动组件(移动端、PC端(鼠标滚轮滑动)都已兼容)
https://github.com/maybeqhl/mv-full-page
fullscreen vue vue3
Last synced: about 1 year ago
JSON representation
vue全屏滑动组件(移动端、PC端(鼠标滚轮滑动)都已兼容)
- Host: GitHub
- URL: https://github.com/maybeqhl/mv-full-page
- Owner: MaybeQHL
- License: mit
- Created: 2020-07-18T09:16:27.000Z (almost 6 years ago)
- Default Branch: vue3
- Last Pushed: 2023-03-07T09:41:34.000Z (over 3 years ago)
- Last Synced: 2025-04-11T03:14:54.694Z (about 1 year ago)
- Topics: fullscreen, vue, vue3
- Language: JavaScript
- Homepage: http://null_639_5368.gitee.io/v-full-page
- Size: 4.39 MB
- Stars: 14
- Watchers: 0
- Forks: 7
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
mv-full-page
兼容PC、移动端(微信公众号) 全屏滚动组件
如果觉得还不错, star一下项目,
也可以在网页底部捐赠给作者一杯咖啡钱,Thanks♪(･ω･)ﾉ。
另外：
如果你的项目用到了此组件，可以提交你的网址进行展示。
#### 其他版本
Vue2版本请移步[2.0分支](https://gitee.com/null_639_5368/v-full-page/tree/master/)
## 安装
```
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
}
});
```
## 示例代码
### 基本使用
[跳转](./src/App.vue)
### 动态插槽
```
{{ `页面${JSON.stringify(item)}` }}
```
### Nuxt3
[示例代码](./examples/nuxt/pages/index.vue)
## 演示
[Demo](http://null_639_5368.gitee.io/v-full-page)
## 功能点
* 移动端触摸滑动
* 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:指示器对应索引})` |
### Ref
| name | 说明 | 参数 |
| ------ | ------------ | ---------------------------------------- |
| goPage | 手动跳转页面 | `(page:页码,quiet:是否静态跳转) => void` |
### 局部滚动 div
| name | 类型 | 默认值 | 备注 |
| ----------- | ------- | ------ | --------------------------------------------------------------------- |
| data-scroll | Boolean | false | 局部滚动一定要在滚动容器添加这个属性 `
` |
## Browsers support
| [
](https://godban.github.io/browsers-support-badges/)Edge | [
](https://godban.github.io/browsers-support-badges/)Firefox | [
](https://godban.github.io/browsers-support-badges/)Chrome | [
](https://godban.github.io/browsers-support-badges/)Safari |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge | last 2 versions | last 2 versions | last 2 versions |
## 展示
* [演示网页](http://null_639_5368.gitee.io/v-full-page/)
* .....
## 赞助
> 优先处理问题，以及定制化方案
>
