vant小程序SwipeCell 完美解决滑动单元格右滑无样式

最新推荐文章于 2024-07-23 08:55:57 发布

qq_34810951

最新推荐文章于 2024-07-23 08:55:57 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_34810951/article/details/109485034

版权

vant小程序SwipeCell 完美解决滑动单元格右滑无样式

解决方案
结果

这个bug是比较坑人的！

直接引入后发现右滑无样式

在这里插入图片描述
代码如下：

<van-swipe-cell right-width="{{ 65 }}">
  <van-checkbox name="a" label-class="car-product-item-cell">
    <van-card price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/apple-2.jpg" lazy-load>
      <view slot="num" class="car-product-itemStepper">
        <van-stepper value="{{ 1 }}" catchtap="onChange" />
      </view>
    </van-card>
  </van-checkbox>
  <view slot="right">删除</view>
</van-swipe-cell>

解决方案

添加样式到wxss

.van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  width: 65px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background-color: #f44;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}