兼容PC、移动端(微信公众号) vue全屏滚动组件 支持vue2和vue3

mv-full-page

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

喜欢的帮忙给个 star, 只要有时间就更新和优化

其他版本

Vue2版本请移步2.0分支

演示

Demo

安装

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
    }
});

示例代码

基本使用

跳转

动态插槽

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

功能点

• 移动端触摸滑动

• 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",
          /**
           * 指示器类名
           */
          className: ""
        },
        /**
         * 缓存页面
         */
        cache: true,
        /**
         * 页面背景数组
         * 示例格式: [{ color:'pink' },{ image:'https://xxx.png' }]
         */
        bgArr: [],
        /**
         * 自定义过渡动画
         */
        transition: {
          duration: "1000ms", // 动画时长
          timingFun: "ease", // 动画速度曲线
          delay: "0s", // 动画延迟
        },
        // 自动播放
        autoPlay: false,
        //  循环播放
        loop: false,
        // 切换间隔
        interval: 1000,
        arrow: {
          // 上一页箭头
          last: false,
          // 下一页箭头
          next: false,
        },
}

---

Events

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

局部滚动 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