vantweapp中的SwipeCell踩坑

目前这种左滑删除的效果非常常见,项目中使用的是vant weAPP由于使用了他的左滑组件,但是如果按照官方文档的方式引入,如下:

"{{ 65 }}" left-width="{{ 65 }}">
  "left">选择
  
    "单元格" value="内容" />
  
  "right">删除

复制代码

加上如下代码后 发现 实现的效果如下:

根本无法实现例子中的样子,这时我们需要在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;
}

复制代码

你可能感兴趣的:(vantweapp中的SwipeCell踩坑)