Vant-weapp滑动单元格SwipeCell右滑无样式
1.在.json中引入SwipeCell组件{"usingComponents": {"van-swipe-cell": "@vant/weapp/swipe-cell/index"},"navigationBarTitleText": ""}2…wxml<van-swipe-cellid="swipe-cell"right-width="{{ 65 }}"left-width="{{ 65
·
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;
}
更多推荐
已为社区贡献2条内容
所有评论(0)