vantweapp中的SwipeCell踩坑

最新推荐文章于 2024-09-13 21:35:37 发布

weixin_34183910

最新推荐文章于 2024-09-13 21:35:37 发布

阅读量1.2w

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://juejin.im/post/5c4eb191e51d45677567a124

版权

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

复制代码