代码拉取完成,页面将自动刷新
vue2版本暂时不再更新维护。
一款兼容PC、移动端(包含微信公众号)的滑动(滚动)组件
https://www.npmjs.com/package/mv-full-page
https://gitee.com/null_639_5368/v-full-page
http://null_639_5368.gitee.io/v-full-page
vue 全屏滑动组件(移动端、PC 端(鼠标滚轮滑动)都已兼容)
支持局部页面动画 附带示例 demo
注意事项:本组件目前仅支持刷新初始化判断 PC 端和移动端环境、以及元素高度的初始化。
其他:喜欢的帮忙给个 star, 只要有时间就更新和优化
移动端全屏触摸滑动
pc 端鼠标滚轮切换
页面切换动画重置
支持动画队列式出现
解决 ios 滑动页面回弹
扩展:自定义 animate 动画指令
支持水平方向或垂直方向的滚动
支持 ts
支持组件内添加局部滚动(已经处理了微信公众号局部元素滚动回弹的问题)
支持自定义滚动容器定位方式和容器大小
指示器切换页面
兼容 IE、Chrome、Firefox
支持自定义过渡动画速度
支持响应式窗口大小改变
支持动态插槽
组件属性
name | 类型 | 默认值 | 备注 |
---|---|---|---|
position | String | "fixed" | 容器定位模式支持 ['fixed', 'relative','static', 'absolute', 'inherit'] |
width | String | "100%" | 设置滚动容器的宽度 |
height | String | "100%" | 设置滚动容器的高度 |
isV | Boolean | true | 滚动的方向 true 为垂直方向,false 为左右方向 |
isCache | Boolean | true | 是否缓存页面 |
pages | Number | 4 | 页面总数 |
bgArr | Array | [ ] | 默认页面背景, 设置图片背景请传入{isBg:true, src:require('这里是你的背景图片路径') }} 示例格式: ["pink", "orange", "pink", {isBg:true, src:require('@/assets/....') } ] |
page | Number | 1 | 当前页面 |
isPointer | Object | true | 是否显示指示器 |
pointerPos | String | 'right' | 指示器的位置 ['right', 'left', 'top', 'bottom'] |
transition | Object | { duration: '700ms', timingFun: 'ease', delay: '0s'} | duration = 动画时长(s/ms) timingFun=动画速度曲线 delay= 动画延迟(s/ms) |
config | Object | 详情见默认配置 | - |
{
// 禁用滚动
disabled: false,
// 自动播放
autoPlay: false,
// 循环播放
loop: false,
// 切换间隔(ms)
interval: 1000,
// 上一页箭头
lastArrow: false,
// 下一页箭头
nextArrow: false,
}
事件
name | 说明 | 回调参数 |
---|---|---|
rollEnd | 滚动页面后触发 | page:滚动后的页码 |
pointerMouseover | 指示器mouseover事件和指示器索引 | {event:事件,index:指示器对应索引} |
局部滚动 div
name | 类型 | 默认值 | 备注 |
---|---|---|---|
data-scroll | Boolean | false | 局部滚动一定要在滚动容器添加这个属性 <div data-scroll="true"></div>
|
尽量更新到最新版本组件
npm i mv-full-page@vue2
// 全局引入
import 'mv-full-page/lib-dist/mv-full-page.css'
import MvFullPage from 'mv-full-page'
Vue.use(MvFullPage)
<template>
<div class="home">
<mv-full-page
:isPointer="true"
pointerPos="right"
:isV="isV"
:pages="4"
:page.sync="currentPage"
:bgArr="bgArr"
:isCache="false"
:transition="{
duration: '700ms', // 动画时长
timingFun: 'ease', // 动画速度曲线
delay: '0s', // 动画延迟
}"
>
<template #page1>
页面1
</template>
<template #page2>
<div class="page2">
页面2
</div>
</template>
<template #page3>
<div class="page3">
页面3
</div>
</template>
<template #page4>
页面4
</template>
</mv-full-page>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
isV: true,
currentPage: 1,
bgArr: ["#4FD7F9", "orange", "pink", "green"]
// bgArr: [{
// isBg: true,
// src: require('@/assets/....')
// }, 'orange', 'pink', 'green']
};
},
};
</script>
<template>
<div class="home">
<mv-full-page
:isPointer="true"
pointerPos="right"
:isV="isV"
:pages="list.length"
:page.sync="currentPage"
:bgArr="bgArr"
:isCache="false"
:transition="{
duration: '700ms', // 动画时长
timingFun: 'ease', // 动画速度曲线
delay: '0s', // 动画延迟
}"
>
<!-- 动态插槽 -->
<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>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
dynamicSlotName: "page",
pages:4,
isV: true,
currentPage: 1,
bgArr: ["#4FD7F9", "orange", "pink", "green"]
// bgArr: [{
// isBg: true,
// src: require('@/assets/....')
// }, 'orange', 'pink', 'green']
list: [],
};
},
mounted() {
// 模拟异步请求
setTimeout(() => {
this.list = [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
{
id: 4,
},
];
}, 1000);
},
};
</script>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import "mv-full-page/lib-dist/mv-full-page.css";
import MvFullPage from "mv-full-page";
@Component({
components: {
MvFullPage
}
})
export default class extends Vue {
currentPage = 1;
bgArr = ["pink", "orange", "pink", "green"];
isV = false;
isCache = false;
pages = 4;
page = 1;
}
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。