一個簡單的tab切換,三個tab分別占滿屏,v-show通過id控制。
因為poster項 flex布局了,tabId更改為2時,依然顯示poster項。
幾番對比,發現小程序v-show是通過偽類view[hidden]{display:none}實現,用戶寫的display: flex權重較高,使之失效。
<view class="main"> <view class="scroll word" v-if='tabId === 0'> </view> <view class="scroll poster" v-if='tabId === 1'> <view class="posterItem"></view> <view class="posterItem"></view> <view class="posterItem"></view> <view class="posterItem"></view> </view> <view class="scroll video" v-if='tabId === 2'>222</view> </view>