102 lines
1.7 KiB
Vue
102 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<uni-swipe-action>
|
||
|
|
<uni-swipe-action-item
|
||
|
|
:right-options="options2"
|
||
|
|
:show="isOpened"
|
||
|
|
:auto-close="false"
|
||
|
|
@change="change"
|
||
|
|
@click="bindClick"
|
||
|
|
>
|
||
|
|
<view class="content-box">
|
||
|
|
<text class="content-text">使用变量控制SwipeAction的开启状态</text>
|
||
|
|
</view>
|
||
|
|
</uni-swipe-action-item>
|
||
|
|
</uni-swipe-action>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show: false,
|
||
|
|
isOpened: 'none',
|
||
|
|
options1: [{
|
||
|
|
text: '取消置顶'
|
||
|
|
}],
|
||
|
|
options2: [{
|
||
|
|
text: '取消',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#007aff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '确认',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#F56C6C'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
contentClick(){
|
||
|
|
console.log('点击内容');
|
||
|
|
uni.showToast({
|
||
|
|
title:'点击内容',
|
||
|
|
icon:'none'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
bindClick(e) {
|
||
|
|
console.log(e);
|
||
|
|
uni.showToast({
|
||
|
|
title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
setOpened() {
|
||
|
|
if (this.isOpened === 'left') {
|
||
|
|
this.isOpened = 'right';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.isOpened === 'right') {
|
||
|
|
this.isOpened = 'none';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
change(e) {
|
||
|
|
this.isOpened = e;
|
||
|
|
console.log('返回：', e);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.content-box {
|
||
|
|
flex: 1;
|
||
|
|
/* #ifdef APP-NVUE */
|
||
|
|
justify-content: center;
|
||
|
|
/* #endif */
|
||
|
|
height: 44px;
|
||
|
|
line-height: 44px;
|
||
|
|
padding: 0 15px;
|
||
|
|
position: relative;
|
||
|
|
background-color: #fff;
|
||
|
|
border-bottom-color: #f5f5f5;
|
||
|
|
border-bottom-width: 1px;
|
||
|
|
border-bottom-style: solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-text {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|