1.在.json中引入SwipeCell组件

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

2…wxml

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

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;
    }
  },
});

这样写是没有官网文档显示的效果的,左右两边的选择和删除是没有样式的
在这里插入图片描述
所以需要在**.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;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐