@lydxwj/vue-fullpage

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

说明: 仅支持移动端

react版本

如果有问题欢迎交流