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', // 确认按钮颜色
}

浙公网安备 33010602011771号