mv-full-page

兼容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>
  

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

Edge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

展示

• 演示网页
• .....

赞助

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