Vant-weapp滑动单元格SwipeCell右滑无样式

1.在.json中引入SwipeCell组件

{
  "usingComponents": {
    "van-swipe-cell": "@vant/weapp/swipe-cell/index"
  },
  "navigationBarTitleText": ""
}

2…wxml


  选择
  
    
  
  删除

3…js

Page({
  onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
      case 'cell':
        instance.close();
        break;
      case 'right':
        Dialog.confirm({
          message: '确定删除吗?',
        }).then(() => {
          instance.close();
        });
        break;
    }
  },
});

这样写是没有官网文档显示的效果的,左右两边的选择和删除是没有样式的
Vant-weapp滑动单元格SwipeCell右滑无样式_第1张图片
所以需要在**.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;
}

你可能感兴趣的:(Vant-weapp滑动单元格SwipeCell右滑无样式)