vue——使用vant輪播組件swipe + flex時，文字抖動問題

參考：https://blog.csdn.net/m0_37983475/article/details/103493921

　　https://blog.csdn.net/yummy_go/article/details/50696328

　　https://segmentfault.com/a/1190000008015671

 

原抖動效果

 

 

改后效果

 

原因

vant輪播組件swipe原理是通過translateX來實現的，會修改元素的位置，引起回流(reflow)，進而引起重繪(repaint)，頁面呈現的就是抖動效果

解決方法

在外層容器的css里加上：transform: translateZ(0);   因為使用translateZ的元素會單獨占據一個渲染層；這樣減小了元素變動時，瀏覽器的重新繪制的區域。

 

部分頁面代碼

<van-swipe-item v-for="(item,index) in meetingList" :key="index">
      <div class="d-meet-top">
         <div>
            <van-icon name="clock" class="v-icon" color="#AEAEB0"/>
            <span class="gray s-text">今天</span>
            <span class="gray" style="color:#111111;font-weight:bold;letter-spacing: -1px;">
               {{item.startTime}}
               <span class="gray" style="margin:0 .5rem;">—</span>
               {{item.endTime}}
            </span>
         </div>
     　　 <div class="d-status green">
              <span>進行中</span>
         </div>
      </div>
      <div class="d-meet-top">
         <div>
            <van-icon name="location" class="v-icon" color="#AEAEB0"/>
            <span class="gray s-text">{{item.location}}</span>
         </div>
         <div>
            <span class="gray s-text" style="margin-left:0;">參會人</span>
            <span class="s-name" v-for="(data,index) in item.person" :key="index"> {{data.substring(0,1)}}</span>
            <van-icon v-if="item.person.length>3 || true" name="ellipsis" color="#AEAEB0"/>
         </div>
    </div>
</van-swipe-item>

部分css代碼

  .d-meet-top {
      display: flex;
      justify-content: space-between;
      transform: translateZ(0);  // 《== 關鍵
}

  .d-meet-top div {
     display: flex;
     align-items: center;
}