请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

lydxwj-react-fullpage: 全屏翻页组件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

lydxwj-react-fullpage

开源软件地址:

https://gitee.com/lydxwj/lydxwj-react-fullpage

开源软件介绍:

@lydxwj/react-fullpage

安装

npm install @lydxwj/react-fullpage --save

使用

import { PageContainer, Pages } from '@lydxwj/react-fullpage';import '@lydxwj/react-fullpage/lib/css/styles.css';<PageContainer onChange={(nowIdx, newIdx) => {  console.log(nowIdx);  console.log(newIdx);}} onChangeEnd={(nowIdx) => {  console.log(nowIdx);}}>  <Pages style={{    backgroundColor: '#51eabe',  }}></Pages>  <Pages style={{    backgroundColor: '#f4ea2a',  }}></Pages>  <Pages style={{    backgroundColor: '#1afa29',  }}></Pages>  <Pages style={{    backgroundColor: '#1296db',  }}></Pages></PageContainer>

组件介绍

import { PageContainer, Pages } from '@lydxwj/react-fullpage';// PageContainer翻页组件盒子,Pages单个翻页组件// 或者 import PageContainer from '@lydxwj/react-fullpage';// PageContainer翻页组件盒子,PageContainer.Pages单个翻页组件

组件配置

  • PageContainer
配置项介绍参数/默认值
onChange页面翻转前回调nowIdx(当前页索引), newIdx(翻转页页索引)
onChangeEnd页面翻转后回调nowIdx(当前页索引)
isArrow是否显示下滑提示箭头true(默认值)
isNav是否显示指示器true(默认值)
style样式对象建议不设置height、width
// PageContainer里面嵌套Pages来使用<PageContainer>  <Pages></Pages></PageContainer>
  • Pages
配置项介绍参数/默认值
againCof回看配置{ isShow: true,是否显示 text: '回看', 文案配置}
again回看回调
style样式对象建议不设置height、width
// Pages可以嵌套自己想要的页面内容<Pages>  <div>页面内容</div></Pages>

说明: 仅支持移动端

如果有问题欢迎交流


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap