12 Star 150 Fork 30

Maybe / mv-full-page

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

mv-full-page

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

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

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

npm version downloads Jsdelivr Hits star star

打个广告,求职 深圳、宜昌(最好宜昌)5年vue,熟悉前后端各种技术体系。

其他版本

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>
  

Nuxt3

示例代码

演示

Demo

功能点

  • 移动端触摸滑动

  • pc端鼠标滚轮切换

  • 支持页面缓存

  • 解决 ios 滑动页面回弹

  • 支持滚动方向切换

  • 支持局部滚动(处理了微信公众号局部元素滚动回弹的问题)

  • 支持自定义滚动容器定位方式和容器大小

  • 指示器切换页面

  • 支持自定义过渡动画速度

  • 支持响应式窗口大小改变

  • 支持动态插槽

  • 支持 typescript

Props

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,
    },
}

Events

name 说明 回调参数
rollEnd 滚动页面后触发 (page:滚动后的页码)
pointerMouseover 指示器mouseover事件和指示器索引 ({event:事件,index:指示器对应索引})

Ref

name 说明 参数
goPage 手动跳转页面 (page:页码,quiet:是否静态跳转) => void

局部滚动 div

name 类型 默认值 备注
data-scroll Boolean false 局部滚动一定要在滚动容器添加这个属性 <div data-scroll="true"></div>

Browsers support

IE / EdgeEdge FirefoxFirefox ChromeChrome SafariSafari
Edge last 2 versions last 2 versions last 2 versions

展示

赞助

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

MIT License Copyright (c) 2022 Maybe Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一个兼容PC端、移动端的Vue(2 & 3)全屏滚动组件。 展开 收起
TypeScript 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/null_639_5368/v-full-page.git
git@gitee.com:null_639_5368/v-full-page.git
null_639_5368
v-full-page
mv-full-page
vue3

搜索帮助

14c37bed 8189591 565d56ea 8189591