Taro 小程序自定义弹窗会穿透滚动

小程序自定义弹窗会穿透滑动是会触发页面滚动,在Taro中把给View添加catchMove属性即可

import React, { Component } from 'react'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import { Slot, View } from '@tarojs/components'
import './index.scss'
/**
 * 返回顶部
 */
export default class AlertDialog extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...props
    }
  }

  onItemClick = (index) => {
    this.setState({
      isOpened: false,
    })
    this.props.isOpened = false
    this.props.onClick(index)
  }

  render() {
    const { isOpened, title, content, actions, color, tintColor, contentExtra, firstColor } = this.props
    return (
      <View catchMove>
        <AtModal isOpened={isOpened} closeOnClickOverlay={false}>
          <AtModalHeader>
            <View className='modal-title'>{title}</View>
          </AtModalHeader>
          <AtModalContent>
            <View className='modal-content' style={{ color: color }}>
              {content}
            </View>
            <View className='modal-content' style={{ color: '#999', fontSize: '24rpx', marginTop: '10rpx' }}>
              {contentExtra}
            </View>
          </AtModalContent>
          <AtModalAction>
            <View className="action-wrap">
              {
                actions.map((item, index) => {
                  return (
                    <View className='button' style={{ color: index == 1 ? tintColor : (index == 0 ? firstColor : '') }} key={index} onClick={() => this.onItemClick(index)}>{item}</View>)
                })
              }
              {/* <View className="button" onClick={() => this.setState({ isAuditOpened: false })}>返回</View>
          <View className="button" onClick={() => this.handleAuditConfirm}>确认审核通过</View> */}
            </View>
          </AtModalAction>
        </AtModal >
      </View>

    )
  }
}

/// 设置默认值
AlertDialog.defaultProps = {
  title: '温馨提示',
  content: '内容',
  firstColor: '#999',
  contentExtra: '',
  actions: ['确定'],
  isOpened: false,
  color: '',   //内容字体颜色
  tintColor: '#e63c3d', // 确认按钮颜色
}

posted @ 2023-03-01 14:34  qqcc1388  阅读(434)  评论(0)    收藏  举报