(自定义组件修改源码)Vant weapp踩坑之滑动单元格SwipeCell样式问题

首先先附上官网:https://youzan.github.io/vant-weapp/#/swipe-cell

可按照官网照做删除的按钮根本没有样式,相信大家也在网上找到了方法解决了,就是直接找到源码的wxss文件直接加

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

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

问题还没结束,如果你是在自定义组件那里使用swipeCell的话,就用我自己的案列来讲:
(自定义组件修改源码)Vant weapp踩坑之滑动单元格SwipeCell样式问题_第1张图片
这按钮就很不听的话在最上面了,所以我们就修改一下官方的源码,修改top就是组件的上边距:
(自定义组件修改源码)Vant weapp踩坑之滑动单元格SwipeCell样式问题_第2张图片
好了这次就很听话了
(自定义组件修改源码)Vant weapp踩坑之滑动单元格SwipeCell样式问题_第3张图片
完成需求了。

你可能感兴趣的:(vant-weapp)