vant weapp采坑记之SwipeCell 滑动单元格无样式

问题：

• swipeCell组件不显示
• 左右滑动无样式

实际操作：

根据官方文档键入模块
.json

"van-swipe-cell": "@vant/weapp/swipe-cell/index"

.wxml

  <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
    <view slot="left">选择</view>
    <van-cell-group>
      <van-cell title="单元格" value="内容" ></van-cell>
    </van-cell-group>
    <view slot="right">删除</view>
  </van-swipe-cell>

实际效果: 模块已引入但无实际效果，手动设置样式不生效

image.png

解决方案显示：

因为swipeCell使用了cell表格，所以在 .json 文件中必须引入表格组件才可展现
.json文件

"usingComponents": {
    "van-cell": "@vant/weapp/cell/index",   //必要
    "van-cell-group": "@vant/weapp/cell-group/index",     //必要
    "van-swipe-cell": "@vant/weapp/swipe-cell/index"   //swipeCell
  }

解决样式问题

此时组件已正常显示，但左右滑动时，两侧按钮样式丢失，在wxss中注入以下css
.wxss

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

image.png image.png