vue移动端滑动切换页面_v-full-page

mv-full-page

介绍

vue 全屏滑动组件(移动端、PC 端(鼠标滚轮滑动)都已兼容)

支持局部页面动画 附带示例 demo

注意事项：本组件目前仅支持刷新初始化判断 PC 端和移动端环境、以及元素高度的初始化。

其他：因为作者目前 2 年水平有很多考虑不到的还望各位海涵，如果组件有 bug 的话大家提出 issue 我会尽快修改，设计组件的初衷是为了方便大家，也方便自己。

更新

同安装 yarn add mv-full-page , 尽量更新到最新版本组件。

功能点

移动端全屏触摸滑动

pc 端鼠标滚轮切换

页面切换动画重置

支持动画队列式出现

解决 ios 滑动页面回弹

扩展：自定义 animate 动画指令

支持水平方向或垂直方向的滚动

支持 ts

示例

码云

属性

name

类型

默认值

备注

isV

Boolean

true

滚动的方向 true 为垂直方向，false 为左右方向

isCache

Boolean

true

是否缓存页面

pages

Number

4

页面总数

bgArr

Array

[ ]

默认页面背景 格式 ["pink", "orange", "pink", { isBg:true, src:require('@/assets/....') } ]

page

Number

1

当前页面

安装

yarn add mv-full-page

yarn add inobounce (禁止屏幕回弹 js)

按需使用动画指令：

拷贝 utils/directives.js

yarn add animate.css

// main.js

import 'animate.css'

import directives from './utils/directives'

Vue.use(directives)

使用方法

:pages="4" // 全屏页面数量

:page.sync="currentPage" // 当前页码

:bgArr="bgArr" // 页面背景数组

:isCache="true" // 默认缓存页面 不缓存(页面元素重新渲染 重置动画)

>

// 这里插槽必须按照page[number]的形式

页面1 第一个动画

页面1 第二个动画

// 按需引入

import 'mv-full-page/lib-dist/mv-full-page.css'

import MvFullPage from 'mv-full-page'

export default {

name: 'home',

components: {

MvFullPage

},

data () {

return {

currentPage: 1,

bgArr: [{

isBg:true,

src:require('@/assets/....')

}, 'orange', 'pink', 'green']

}

}

}

// vue + typescript

import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

import MvFullPage from 'mv-full-page'

@Component({

components: {

Button

},

})

export default class Home extends Vue implements MvFullPage {

currentPage = 1

bgArr = ['pink', 'orange', 'pink', 'green']

isV = false

isCache = false

pages = 4

page = 1

}

// 全局引入

// main.js

import 'mv-full-page/lib-dist/mv-full-page.css'

import MvFullPage from 'mv-full-page'

Vue.use(MvFullPage)