小程序tarojs框架之popup底部弹控件扩展demo

[coleava]

不借用react-vant库 先npm install actionsheet-react

import React, { createRef } from "react";
import "./index.css";
import ActionSheet from "actionsheet-react";
import Taro from '@tarojs/taro'

export default class ActionSheetDetail extends React.Component {

  constructor(props) {
    super(props);
    this.detailRef = createRef()
    this.node = null
    this.env = process.env.TARO_ENV;
  }

  async componentDidMount() {
    this.node = document.getElementsByClassName('action-sheet-detail')[0];
    this.node.style.top = 'auto';
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible) {
        this.openStyle();
        this.detailRef.current.open();
    } else {
      this.closeStyle();
      this.detailRef.current.close();
    }
  }

  openStyle = () => {
    this.node.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
    this.node.style.height = '100%';
    this.node.style.top = '0px';
  }

  closeStyle = () => {
    this.node.style.backgroundColor = 'rgba(247, 247, 249, 0)';
    this.node.style.height = 0;
    this.node.style.top = 'auto';
  }

  colseActionSheet = () => {
    Taro.eventCenter.trigger('clearSelect')
    this.detailRef.current.close();
    this.props.colseDetail();
  }

  render() {
    return <ActionSheet
      ref={this.detailRef}
      className="action-sheet-detail"
      sheetStyle={{ borderTopLeftRadius: '16px', borderTopRightRadius: '16px', background: '#fff' }}
      onClose={() => {
        this.closeStyle();
        this.props.colseDetail();
      }}
    >
      {this.props.children}
    </ActionSheet>
  }
}

[coleava]

index.css none