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;
}

复制代码