女人和男人做爰网站/营销方案网站

目录

一、基本用法

二、使用变量控制SwipeAction的开启状态

三、swipe-action 列表

---

 官方示例：https://ext.dcloud.net.cn/plugin?id=181 

禁止左右滑动，只需要在uni-swipe-action-item组件的属性上添加 :disabled="true"即可

一、基本用法

1、直接使用组件

<template><view><uni-swipe-action><uni-swipe-action-item :left-options="options2" :right-options="options1" @click="bindClick"><view class="content-box"><text>使用数据填充</text></view></uni-swipe-action-item></uni-swipe-action></view>
</template><script>
export default {components: {},data() {return {options1: [{text: '取消置顶'}],options2: [{text: '取消',style: {backgroundColor: '#007aff'}},{text: '确认',style: {backgroundColor: '#dd524d'}}]};},methods: {bindClick(e) {uni.showToast({title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,icon: 'none'});}}
};
</script>
<style>
.content-box {flex: 1;height: 44px;line-height: 44px;padding: 0 15px;position: relative;background-color: #fff;border: 1px solid #f5f5f5;
}
</style>

2、使用插槽自定义样式

<template><view><uni-swipe-action><uni-swipe-action-item @click="bindClick"><template v-slot:left><view class="slot-button"><text @click="bindClick({position:'left',content:{text:'置顶'}})">置顶</text></view></template><view style="padding: 10px;background-color: white;">使用插槽</view><template v-slot:right><view class="slot-button">删除</view></template></uni-swipe-action-item></uni-swipe-action></view>
</template><script>export default {components: {},data() {return {};},methods:{bindClick(e) {uni.showToast({title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,icon: 'none'});}}};
</script>
<style>.slot-button {display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 0 20px;background-color: #ff5a5f;}
</style>

二、使用变量控制SwipeAction的开启状态

<template><view><button @click="setOpened">当前状态：{{isOpened}}</button><uni-swipe-action><uni-swipe-action-item :left-options="options" :right-options="options" :show="isOpened" :auto-close="false"><view class="content-box"><text>使用变量控制SwipeAction的开启状态</text></view></uni-swipe-action-item></uni-swipe-action></view>
</template><script>export default {components: {},data() {return {show: false,isOpened: 'none',options: [{text: 'haha'}]};},methods: {setOpened() {if (this.isOpened === 'none') {this.isOpened = 'left';return;}if (this.isOpened === 'left') {this.isOpened = 'right';return;}if (this.isOpened === 'right') {this.isOpened = 'none';return;}}}};
</script>
<style>
.content-box {flex: 1;height: 44px;line-height: 44px;padding: 0 15px;position: relative;background-color: #fff;border: 1px solid #f5f5f5;
}
</style>

三、swipe-action 列表

<template><view><uni-swipe-action><uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options" :key="item.id" @click="swipeClick($event, index)"><view class="content-box"><text>{{ item.content }}</text></view></uni-swipe-action-item></uni-swipe-action></view>
</template><script>
export default {components: {},data() {return {swipeList: [{id: 0,options: [{text: '添加',style: {backgroundColor: 'rgb(255,58,49)'}}],content: 'item1'},{id: 1,options: [{text: '置顶'},{text: '删除',style: {backgroundColor: 'rgb(255,58,49)'}}],content: 'item2'},{id: 2,options: [{text: '置顶'},{text: '标记为已读',style: {backgroundColor: 'rgb(254,156,1)'}},{text: '删除',style: {backgroundColor: 'rgb(255,58,49)'}}],content: 'item3'}]};},methods: {swipeClick(e, index) {let { content } = e;if (content.text === '删除') {uni.showModal({title: '提示',content: '是否删除',success: res => {if (res.confirm) {this.swipeList.splice(index, 1);} else if (res.cancel) {console.log('用户点击取消');}}});} else if (content.text === '添加') {if (this.swipeList.length < 6) {this.swipeList.push({id: new Date().getTime(),options: [{text: '置顶'},{text: '标记为已读',style: {backgroundColor: 'rgb(254,156,1)'}},{text: '删除',style: {backgroundColor: 'rgb(255,58,49)'}}],content: '新增' + new Date().getTime()});uni.showToast({title: `添加了一条数据`,icon: 'none'});} else {uni.showToast({title: `最多有六条数据`,icon: 'none'});}} else {uni.showToast({title: `点击了${e.content.text}按钮`,icon: 'none'});}}}
};
</script>
<style>
.content-box {flex: 1;height: 44px;line-height: 44px;padding: 0 15px;position: relative;background-color: #fff;border: 1px solid #f5f5f5;
}
</style>