vantui
vantui copied to clipboard
Popup 组件 ,wx小程序中,显示后在关闭,如果页面中有资源图片,会导致页面闪烁~
实例代码如下:
每当popup 隐藏,都会导致页面中的Image 闪烁
const [payModal, setPayModal] = useState(false);
<View>
<Image src={`${ossUrl}/comprehensive/banner-group1.png`} mode='widthFix' style={{ width: '100%' }}></Image>
<Button type='primary' onClick={() => setPayModal(true)}>
asd11111
</Button>
<Popup show={payModal} position='bottom' round closeable onClose={() => setPayModal(false)}>
<View className='buy-modal'>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
</View>
</Popup>
</View>
"@tarojs/react": "3.4.8", "@tarojs/runtime": "3.4.8", "@tarojs/taro": "3.4.8", "react": "^17.0.0", "react-dom": "^17.0.0"
没有复现,两者没有关联,可能是ossUrl导致?
import react from 'react'
import { View } from '@tarojs/components'
import { Cell, Popup, Image } from '@antmjs/vantui'
export default function Demo() {
const [show, setShow] = react.useState(false)
return (
<View>
<Image
width="100px"
height="100px"
src="https://img.yzcdn.cn/vant/cat.jpeg"
mode="widthFix"
/>
<Cell title="展示弹出层" isLink onClick={() => setShow(true)} />
<Popup
round
closeable
position="bottom"
show={show}
onClose={() => setShow(false)}
>
内容
<View className="count-down">asdasd</View>
<View className="count-down">asdasd</View>
<View className="count-down">asdasd</View>
<View className="count-down">asdasd</View>
<View className="count-down">asdasd</View>
<View className="count-down">asdasd</View>
</Popup>
</View>
)
}
// 图片height 如果是auto 就会出现 跳动 // 我想法是 是不是因为状态改变 导致又重新渲染了 单独把图片包装memo 也会出现同样的情况 // 想要不闪烁 只有 换成背景图 不会闪烁,但是页面图片很多 高度自适应,背景就不现实了~
import react from 'react';
import { View } from '@tarojs/components';
import { Cell, Popup, Image } from '@antmjs/vantui';
export default function Demo() {
const [show, setShow] = react.useState(false);
return (
<View>
<Image src='https://img.yzcdn.cn/vant/cat.jpeg' fit='widthFix' style={{ width: '100px', height: 'auto' }} />
<Cell title='展示弹出层' isLink onClick={() => setShow(true)} />
<Popup round closeable position='bottom' show={show} onClose={() => setShow(false)}>
内容
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
<View className='count-down'>asdasd</View>
</Popup>
</View>
);
}