效果展示
实现步骤
第一步 下载插件
下载地址:uni-swipe-action 滑动操作 - DCloud 插件市场
下载后选择对应的项目
第二步:直接上手写代码
<uni-swipe-action>
<uni-swipe-action-item :left-options="options1" @click="onClick" @change="change">
<view>未滑动之前显示的内容</view>
</uni-swipe-action-item> </uni-swipe-action>
options1:[
{
text: '取消',
style: {
backgroundColor: '#007aff'
}
}, {
text: '编辑',
style: {
backgroundColor: '#dd524d'
}
}
]
methods: {
bindClick(e) {
uni.showToast({
title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
icon: 'none'
});
},
swipeChange(e) {
console.log(e);
}
}