van-image 切换图片闪烁-CSDN博客

本文链接：https://blog.csdn.net/u010724819/article/details/129446384

首先来看下现象，如下图所示是两种颜色的图片，我使用的是v-if方式实现的。

  <div v-if="!showTime">
            <van-image
              width="0.2rem" height="0.15rem"
              :src="require('../assets/images/iv_arrowdown_gray.png')"/>
          </div>
          <div v-else>
            <van-image
              width="0.2rem" height="0.15rem"
              :src="require('../assets/images/iv_arrowup_gray.png')"/>
</div>

做完之后发现，在改变showTime值的时候虽然能够实现切换效果，但是van-image总是会闪一下，体验感很差，尝试了很多种方式之后，发现官方文档里面有这个api。

这里的加载状态展示默认是true，所以导致切换图片的时候会闪烁一下，现在加入show-loading属性，则完美解决了这个问题。

 <div v-if="!showTime">
            <van-image
              :show-loading="false"
              width="0.2rem" height="0.15rem"
              :src="require('../assets/images/iv_arrowdown_gray.png')"/>
          </div>
          <div v-else>
            <van-image
              :show-loading="false"
              width="0.2rem" height="0.15rem"
              :src="require('../assets/images/iv_arrowup_gray.png')"/>
</div>