vant小程式SwipeCell 完美解決滑動單元格右滑無樣式

qq_34810951發表於2020-11-04

vant小程式SwipeCell 完美解決滑動單元格右滑無樣式

這個bug是比較坑人的!


直接引入後發現右滑無樣式

在這裡插入圖片描述
程式碼如下:

<van-swipe-cell right-width="{{ 65 }}">
  <van-checkbox name="a" label-class="car-product-item-cell">
    <van-card price="2.00" desc="描述資訊" title="商品標題" thumb="https://img.yzcdn.cn/vant/apple-2.jpg" lazy-load>
      <view slot="num" class="car-product-itemStepper">
        <van-stepper value="{{ 1 }}" catchtap="onChange" />
      </view>
    </van-card>
  </van-checkbox>
  <view slot="right">刪除</view>
</van-swipe-cell>

解決方案

新增樣式到wxss

.van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  width: 65px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background-color: #f44;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

結果

在這裡插入圖片描述

相關文章