你好,这是官网示例有问题。可以使用下面的内容尝试。
<template>
<view class="container">
<uni-swipe-action>
<!-- 基础用法 -->
<uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
<view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
<!-- 使用插槽 (请自行给定插槽内容宽度)-->
<uni-swipe-action-item>
<template v-slot:left>
<view><text>置顶</text></view>
</template>
<view>
<text>使用插槽</text>
</view>
<template v-slot:right>
<view><text>删除</text></view>
</template>
</uni-swipe-action-item>
<!-- 混合用法 -->
<uni-swipe-action-item :right-options="options">
<template v-slot:left>
<view><text>置顶</text></view>
</template>
<view><text>混合使用</text></view>
</uni-swipe-action-item>
</uni-swipe-action>
<!-- 禁止滑动 -->
<uni-swipe-action>
<uni-swipe-action-item :disabled="true" :right-options="options">
<view>SwipeAction 基础使用场景</view>
</uni-swipe-action-item>
</uni-swipe-action>
<!-- 按组使用 -->
<uni-swipe-action>
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 0)">
<view>item1</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 1)">
<view>item2</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange($event, 2)">
<view>item3</view>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
</template>
<script>
export default {
data() {
return {
options: [{
text: '取消',
style: {
backgroundColor: '#007aff'
}
}, {
text: '确认',
style: {
backgroundColor: '#dd524d'
}
}]
}
},
methods: {
onClick(e) {
console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
},
change(event) {
console.log('改变事件', event);
},
swipeChange(e, index) {
console.log('当前状态:' + e + ',下标:' + index)
}
}
}
</script>
1 个回复
DCloud_UNI_yuhe
你好,这是官网示例有问题。可以使用下面的内容尝试。