vantui icon indicating copy to clipboard operation
vantui copied to clipboard

Popup 组件 ,wx小程序中,显示后在关闭,如果页面中有资源图片,会导致页面闪烁~

Open wiscgazf opened this issue 2 years ago • 3 comments

实例代码如下:

每当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>

wiscgazf avatar Oct 26 '22 08:10 wiscgazf

"@tarojs/react": "3.4.8", "@tarojs/runtime": "3.4.8", "@tarojs/taro": "3.4.8", "react": "^17.0.0", "react-dom": "^17.0.0"

wiscgazf avatar Oct 26 '22 08:10 wiscgazf

没有复现,两者没有关联,可能是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>
  )
}

zuolung avatar Oct 26 '22 09:10 zuolung

// 图片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>
    );
}


wiscgazf avatar Oct 26 '22 10:10 wiscgazf