微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示和样式问题滑动后删除样式不显示

白臻

已于 2024-07-18 08:16:03 修改

阅读量781

点赞数 5

分类专栏：小程序文章标签：微信小程序小程序

于 2024-07-17 17:22:13 首次发布

本文链接：https://blog.csdn.net/weixin_44166849/article/details/140500587

版权

小程序专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在微信小程序开发过程中遇到个坑此处引用 swipeCell 组件刚开始是组件不显示然后又遇到样式不生效

在这里插入图片描述

首先排除问题

是否在.json文件中引入了组件

{
  "usingComponents": {
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-cell": "@vant/weapp/cell/index",
  },
  "navigationBarTitleText": "收货地址"
}

是否在 wxml中引入了该组件

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

排除了以上问题 swipeCell 显示了但是左右滑动样式不对
在这里插入图片描述

解决办法

在 .scss 文件中自己写样式吧

.van-swipe-cell__right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #f44;
}

.van-swipe-cell__left {
  background-color: #07c160;
}