vantweapp中的SwipeCell踩坑

3,587 阅读1分钟

目前这种左滑删除的效果非常常见,项目中使用的是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;
}