{"id":20266490,"url":"https://github.com/maybeqhl/mv-full-page","last_synced_at":"2025-04-11T03:15:01.030Z","repository":{"id":38986572,"uuid":"280622351","full_name":"MaybeQHL/mv-full-page","owner":"MaybeQHL","description":"vue全屏滑动组件(移动端、PC端(鼠标滚轮滑动)都已兼容)","archived":false,"fork":false,"pushed_at":"2023-03-07T09:41:34.000Z","size":4601,"stargazers_count":14,"open_issues_count":20,"forks_count":7,"subscribers_count":0,"default_branch":"vue3","last_synced_at":"2025-04-11T03:14:54.694Z","etag":null,"topics":["fullscreen","vue","vue3"],"latest_commit_sha":null,"homepage":"http://null_639_5368.gitee.io/v-full-page","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaybeQHL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-18T09:16:27.000Z","updated_at":"2024-08-22T07:21:04.000Z","dependencies_parsed_at":"2023-02-08T03:01:41.982Z","dependency_job_id":null,"html_url":"https://github.com/MaybeQHL/mv-full-page","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaybeQHL%2Fmv-full-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaybeQHL%2Fmv-full-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaybeQHL%2Fmv-full-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaybeQHL%2Fmv-full-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaybeQHL","download_url":"https://codeload.github.com/MaybeQHL/mv-full-page/tar.gz/refs/heads/vue3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248333594,"owners_count":21086200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fullscreen","vue","vue3"],"created_at":"2024-11-14T12:09:34.689Z","updated_at":"2025-04-11T03:15:01.011Z","avatar_url":"https://github.com/MaybeQHL.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ch1 style=\"text-align:center;\"\u003emv-full-page\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n 兼容PC、移动端(微信公众号) 全屏滚动组件\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n 如果觉得还不错, star一下项目,\n 也可以在网页底部捐赠给作者一杯咖啡钱,Thanks♪(･ω･)ﾉ。\n\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n另外：\n如果你的项目用到了此组件，可以提交你的网址进行展示。\n\u003c/p\u003e\n\n\n \u003cp align=\"center\" \u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/mv-full-page/next?style=flat-square\" alt=\"npm version\"  style=\"margin-right:5px;\" /\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/mv-full-page.svg?style=flat-square\u0026color=#4fc08d\" alt=\"downloads\" style=\"margin-right:5px;\"   /\u003e\n    \u003cimg src=\"https://img.shields.io/jsdelivr/npm/hm/mv-full-page@next?style=flat-square\" alt=\"Jsdelivr Hits\" style=\"margin-right:5px;\"  \u003e\n\n  \u003cimg src=\"https://img.shields.io/github/stars/maybeQHL/mv-full-page?style=flat-square\u0026logo=GitHub\" alt=\"star\" style=\"margin-right:5px;\"  \u003e\n   \u003cimg src=\"https://gitee.com/null_639_5368/v-full-page/badge/star.svg?style=flat-square\" alt=\"star\"\u003e\n\u003c/p\u003e\n\n#### 其他版本\nVue2版本请移步[2.0分支](https://gitee.com/null_639_5368/v-full-page/tree/master/)\n\n## 安装\n```\nnpm i mv-full-page@next\n```\n或\n```\nyarn add mv-full-page@next\n```\n\n## 全局注册\n\n``` \nimport { createApp } from 'vue';\nimport MvFullPage from 'mv-full-page'\nimport 'mv-full-page/dist-lib/style.css'\n\nconst app = createApp();\n\napp.use(MvFullPage);\n```\n## 局部注册\n```\nimport { defineComponent } from \"vue\";\nimport MvFullPage from 'mv-full-page'\nimport 'mv-full-page/dist-lib/style.css'\n\nexport default defineComponent({\n    components:{\n        MvFullPage\n    }\n});\n```\n## 示例代码\n### 基本使用\n\n[跳转](./src/App.vue)\n\n### 动态插槽\n```\n   \u003cmv-full-page   \n    :pages=\"list.length\"\n    :v-model:page=\"page\" \n    \u003e\n      \u003c!-- 动态插槽 --\u003e\n      \u003ctemplate\n        v-slot:[dynamicSlotName+(index+1)]\n        v-for=\"(item, index) in list\"\n      \u003e\n        \u003cdiv :class=\"`page${index + 1}`\" :key=\"index\"\u003e\n          {{ `页面${JSON.stringify(item)}` }}\n        \u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/mv-full-page\u003e\n```\n### Nuxt3\n[示例代码](./examples/nuxt/pages/index.vue)\n## 演示\n\n[Demo](http://null_639_5368.gitee.io/v-full-page)\n\n\n## 功能点\n\n*  移动端触摸滑动\n\n*  pc端鼠标滚轮切换\n\n*  支持页面缓存\n\n*  解决 ios 滑动页面回弹\n\n*  支持滚动方向切换\n\n*  支持局部滚动（处理了微信公众号局部元素滚动回弹的问题）\n\n*  支持自定义滚动容器定位方式和容器大小\n\n*  指示器切换页面\n\n*  支持自定义过渡动画速度\n\n*  支持响应式窗口大小改变\n\n*  支持动态插槽\n\n*  支持 typescript\n\n## Props\n\n| name                 | 类型   | 默认值 | 备注       |\n| -------------------- | ------ | ------ | ---------- |\n| pages                | Number | 1      | 页面总数   |\n| page: `v-model:page` | Number | 1      | 当前页面   |\n| config               | Object | -      | 详情见配置 |\n\n### 配置\n```\n{\n    /**\n     * 定位模式\n     */\n    position: \"fixed\",\n    /**\n     * 自定义容器宽度\n     */\n    width: \"100%\",\n    /**\n     * 自定义容器高度\n     */\n    height: \"100%\",\n    /**\n     *  v =\u003e 垂直方向 ， h =\u003e 水平方向\n     */\n    direction: \"h\",\n    poi: {\n      /**\n       * 显示指示器\n       */\n      pointer: true,\n      /**\n       * 指示器位置\n       */\n      position: \"right\",\n    },\n    /**\n     * 缓存页面\n     */\n    cache: true,\n    /**\n     * 页面背景数组\n     * @example [{color:'green',image:'http://...'}]\n     */\n    bgArr: [],\n    /**\n     * 背景图片属性配置\n     */\n    bgConfig: {\n      fit: \"cover\",\n    },\n    /**\n     * 自定义过渡动画\n     */\n    transition: {\n      duration: \"1000ms\", // 动画时长\n      timingFun: \"ease\", // 动画速度曲线\n      delay: \"0s\", // 动画延迟\n    },\n    //  循环播放\n    loop: false,\n    arrow: {\n      // 上一页箭头\n      last: false,\n      // 下一页箭头\n      next: false,\n    },\n    // 自动播放\n    autoPlay: {\n      play: false,\n      // 切换间隔\n      interval: 1000,\n    },\n}\n```\n\n***\n\n### Events\n\n| name             | 说明                            | 回调参数                              |\n| ---------------- | ------------------------------- | ------------------------------------- |\n| rollEnd          | 滚动页面后触发                  | `(page:滚动后的页码)`                 |\n| pointerMouseover | 指示器mouseover事件和指示器索引 | `({event:事件,index:指示器对应索引})` |\n\u003cbr\u003e\n\n### Ref\n| name   | 说明         | 参数                                     |\n| ------ | ------------ | ---------------------------------------- |\n| goPage | 手动跳转页面 | `(page:页码,quiet:是否静态跳转) =\u003e void` |\n\n\n### 局部滚动 div\n\n| name        | 类型    | 默认值 | 备注                                                                  |\n| ----------- | ------- | ------ | --------------------------------------------------------------------- |\n| data-scroll | Boolean | false  | 局部滚动一定要在滚动容器添加这个属性 `\u003cdiv data-scroll=\"true\"\u003e\u003c/div\u003e` |\n\n\n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"42px\" height=\"42px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eEdge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"42px\" height=\"42px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"42px\" height=\"42px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"42px\" height=\"42px\" /\u003e](https://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Edge                                                                                                                                                                                                        | last 2 versions                                                                                                                                                                                                    | last 2 versions                                                                                                                                                                                                | last 2 versions                                                                                                                                                                                                |\n\n## 展示\n* [演示网页](http://null_639_5368.gitee.io/v-full-page/)\n* .....\n\n\n## 赞助\n\u003e 优先处理问题，以及定制化方案\n\u003e \n\u003cimg src=\"https://common-1251804846.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220224134022.jpg\" width=200 height=300\u003e\n\u003cimg src=\"https://common-1251804846.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220224134028.jpg\" width=200 height=300\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaybeqhl%2Fmv-full-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaybeqhl%2Fmv-full-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaybeqhl%2Fmv-full-page/lists"}