0.0.3 • Published 5 years ago
@lydxwj/vue-fullpage v0.0.3
@lydxwj/vue-fullpage
安装
npm install @lydxwj/vue-fullpage --save使用
// 入口文件
import FullPage from '../src/index.js'
Vue.use(FullPage);// 项目中文件
<template>
<PageContainer @onChange="onChange" @onChangeEnd="onChangeEnd">
<Pages :sty="{
backgroundColor: '#51eabe',
}">
<div>第一</div>
</Pages>
<Pages :sty="{
backgroundColor: '#f4ea2a',
}">
<div>第二</div>
</Pages>
<Pages :sty="{
backgroundColor: '#1afa29',
}">
<div>第三</div>
</Pages>
<Pages :sty="{
backgroundColor: '#1296db',
}" :againCof="{
isShow: true,
text: '重播'
}" @again="again">
<div>第四</div>
</Pages>
</PageContainer>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
onChange: (nowIdx, newIdx) => {
console.log(nowIdx);
console.log(newIdx);
},
onChangeEnd: (nowIdx) => {
console.log(nowIdx);
},
again: () => {
console.log('重播');
},
},
};
</script>
<style lang="stylus" scoped>
</style>组件介绍
<PageContainer></PageContainer>
<Pages></Pages>
// PageContainer翻页组件盒子,用于嵌套Pages，Pages单个翻页组件组件配置
- PageContainer
| 配置项 | 介绍 | 参数/默认值 |
|---|---|---|
| onChange | 页面翻转前回调 | nowIdx（当前页索引）, newIdx（翻转页页索引） |
| onChangeEnd | 页面翻转后回调 | nowIdx（当前页索引） |
| isArrow | 是否显示下滑提示箭头 | true（默认值） |
| isNav | 是否显示指示器 | true（默认值） |
| sty | 样式对象 | 建议不设置height、width |
// PageContainer里面嵌套Pages来使用
<PageContainer>
<Pages></Pages>
</PageContainer>- Pages
| 配置项 | 介绍 | 参数/默认值 |
|---|---|---|
| againCof | 回看配置 | { isShow: true,//是否显示 text: '', //文案配置} |
| again | 回看回调 | 无 |
| sty | 样式对象 | 建议不设置height、width |
// Pages可以嵌套自己想要的页面内容
<Pages>
<div>页面内容</div>
</Pages>说明: 仅支持移动端