问题:
- 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>
实际效果: 模块已引入但无实际效果,手动设置样式不生效
解决方案显示:
因为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;
}