vantweapp中的SwipeCell踩坑

目前這種左滑刪除的效果很是常見，項目中使用的是vant weAPP因爲使用了他的左滑組件，可是若是按照官方文檔的方式引入，以下：

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">選擇</view>
  <van-cell-group>
    <van-cell title="單元格" value="內容" />
  </van-cell-group>
  <view slot="right">刪除</view>
</van-swipe-cell>
複製代碼

加上以下代碼後 發現 實現的效果以下:

根本沒法實現例子中的樣子，這時咱們須要在css中加入如下的代碼

.van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  width: 65px;
  height: 44px;
  font-size: 15px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  background-color: #f44;
}

複製代碼