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" ><!-- 動態插槽 --><templatev-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

EdgeFirefoxChromeSafari

Edge	last 2 versions	last 2 versions	last 2 versions

總結

以上是生活随笔為你收集整理的兼容PC、移动端(微信公众号) vue全屏滚动组件 支持vue2和vue3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。