先看效果图:
- jsx:
- import Taro, { Component } from '@tarojs/taro'
- import { View, Image } from '@tarojs/components'
- import closeImg from '../../images/icons/close.png'
- import './FloatLayout.sCSS'
- interface IProps {
- isOpened: boolean,
- onClose: Function,
- title: string,
- }
- class FloatLayout extends Component<IProps, {}> {
- state = {
- }
- handleClose () {
- this.props.onClose()
- }
- render () {
- const {isOpened, title} = this.props
- return (
- <View className={isOpened ? "float-layout active" : "float-layout"}>
- <View className='float-layout__overlay' onClick={this.handleClose.bind(this)}></View>
- <View className='float-layout__container layout'>
- <View className='layout-header xmg-border-b'>
- {title}
- <Image src={closeImg} className='close-img'/>
- </View>
- <View className='layout-body'>
- {this.props.children}
- </View>
- </View>
- </View>
- )
- }
- }
- export { FloatLayout }
- SCSS:
- .flolayout {
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- visibility: hidden;
- z-index: 810;
- transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
- &.active {
- visibility: visible;
- .flolayout__overlay {
- opacity: 1;
- }
- .flolayout__container {
- transform: translate3d(0, 0, 0);
- }
- }
- }
- .flolayout__overlay {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: absolute;
- background-color: rgba(0, 0, 0, 0.3);
- opacity: 0;
- transition: opacity 150ms ease-in;
- }
- .flolayout__container {
- position: absolute;
- bottom: 0;
- width: 100%;
- min-height: 600px;
- max-height: 950px;
- background-color: #fff;
- border-radius: 32px 32px 0px 0px;
- transform: translate3d(0, 100%, 0);
- transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
- transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
- transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1),
- -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
- }
- .flolayout .layout-header {
- position: relative;
- padding: 30px 0;
- text-align: center;
- .close-img {
- position: absolute;
- right: 28px;
- top: 36px;
- width: 36px;
- height: 36px;
- }
- }
- .flolayout .layout-header__title {
- overflow: hidden;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #333;
- font-size: 32px;
- display: block;
- padding-right: 80px;
- }
- .flolayout .layout-header__icon {
- line-height: 1;
- position: absolute;
- top: 50%;
- right: 18px;
- padding: 10px;
- transform: translate(0, -50%);
- }
- .flolayout .layout-body {
- font-size: 28px;
- padding: 20px;
- height: 602px;
- }
- .flolayout .layout-body__content {
- position: relative;
- height: 500px;
- overflow-y: scroll;
- }
组件必须传三个参数,
- isOpened: boolean, // 控制显示
- onClose: Function, // 处理关闭弹窗逻辑
- title: string // 标题
来源: http://www.bubuko.com/infodetail-2998586.html