• taro floatLayout组件


    floatLayout.js

    import Taro from '@tarojs/taro'
    import { View, Image } from '@tarojs/components'
    // import closeImg from '../../images/icons/close.png'
    
    import './floatLayout.scss'
    
    export default class Index extends Taro.Component {
        constructor(props) {
            super(props)
        }
    
        componentWillMount() { }
    
        handleClose() {
            console.log("1111111111");
            this.props.onClose()
        }
    
        render() {
            let { isOpened, title } = this.props
            return (
                <View className={isOpened ? "flolayout active" : "flolayout"}>
                    <View className='flolayout__overlay' onClick={this.handleClose}></View>
                    <View className='flolayout__container layout'>
                        <View className='layout-header  xmg-border-b'>
                            {title}
                            {/* <Image src={closeImg} className='close-img' /> */}
                            <View>X</View>
                        </View>
                        <View className='layout-body'>
                            {this.props.children}
                        </View>
                    </View>
                </View>
            )
        }
    }

    floatLayout.scss

    .flolayout {
      position: fixed;
       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;
       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;
       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;
         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;
    }
  • 相关阅读:
    shell脚本大小写转换
    python写xml及几个问题
    Java集合系列导读
    Java集合系列之Collection接口
    并发编程之锁机制
    Java中的堆内存和栈内存
    Java与ElasticSearch的交互操作
    ElasticSearch基础概念
    Java的对象和类
    Spring Validator参数校验
  • 原文地址:https://www.cnblogs.com/zhaomeizi/p/14354154.html
走看看 - 开发者的网上家园