简体中文
通过滑动触发选项的容器
注意事项
为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
uni-swipe-action
和 uni-swipe-action-item
需要同时使用uni-swipe-action
不能嵌套在 swiper
中使用$event
获取额外参数options
属性替换成 right-options
<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="bindClick" @change="swipeChange($event, index)">
<view >item1</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
<view>item2</view>
</uni-swipe-action-item>
<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, index)">
<view>item3</view>
</uni-swipe-action-item>
</uni-swipe-action>
export default {
data(){
return {
options:[
{
text: '取消',
style: {
backgroundColor: '#007aff'
}
}, {
text: '确认',
style: {
backgroundColor: '#dd524d'
}
}
]
}
},
methods:{
onClick(e){
console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
},
swipeChange(e,index){
console.log('当前状态:'+ e +',下标:' + index)
}
}
}
方法通过 ref 调用
方法称名 | 说明 |
---|---|
resize() | 动态添加数据后,如不能正常滑动,需要主动调用此方法,微信小程序、h5、app-vue 不生效 |
closeAll() | 关闭所有已经打开的组件 |
属性名 | 类型 | 可选值 | 默认值 | 是否必填 | 说明 |
---|---|---|---|---|---|
show | String | left/right/none | none | 否 | 开启关闭组件,auto-close = false 时生效 |
threshold | Number | - | 20 | 否 | 滑动阈值 |
disabled | Boolean | - | false | 否 | 是否禁止滑动 |
autoClose | Boolean | - | true | 否 | 其他组件开启的时候,当前组件是否自动关闭,注意:长列表使用会有性能问题 |
left-options | Array/Object | - | - | 否 | 左侧选项内容及样式 |
right-options | Array/Object | - | - | 否 | 右侧选项内容及样式 |
参数 | 类型 | 是否必填 | 说明 |
---|---|---|---|
text | String | 是 | 按钮的文字 |
style | Object | 否 | 按钮样式{backgroundColor,color,fontSize},backgroundColor默认为:#C7C6CD,color默认为:#FFFFFF,fontSize默认为:14px |
事件称名 | 说明 | 返回值 |
---|---|---|
@click | 点击选项按钮时触发事件 | e = {content,index} ,content(点击内容)、index(下标)、position (位置信息) |
@change | 组件打开或关闭时触发 | left:左侧 ,right:右侧,none:关闭 |
名称 | 说明 |
---|---|
- | 默认插槽自定义显示内容 |
default | 默认内容插槽 |
left | 左侧滑动内容 ,会覆盖 leftOptions 内容 |
right | 右侧滑动内容 ,会覆盖 rightOptions 内容 |
提示
{
"path": "swipe-action/swipe-action",
"style": {
"navigationBarTitleText": "SwipeAction 滑动操作",
"disableScroll":true,
"app-plus":{
"bounce":"none"
}
}
}
** Q:动态加载数据,组件滑动失效是怎么回事**
** Q:运行到 nvue 下没有样式**
// manifest.json
{
"nvueStyleCompiler" : "uni-app",
}
注意
示例依赖了 uni-card
uni-section
uni-scss
等多个组件,直接拷贝示例代码将无法正常运行 。
请到 组件下载页面 ,在页面右侧选择 使用 HBuilderX导入示例项目
,体验完整组件示例。
Template
Script
Style
<template>
<view class="container">
<uni-card is-full :is-shadow="false">
<text class="uni-h6">通过滑动触发选项的容器,容器内可放置列表等组件,通过左右滑动来触发一些操作。</text>
</uni-card>
<uni-section
title="基本用法"
type="line"
></uni-section>
<uni-swipe-action>
<uni-swipe-action-item
:left-options="options2"
:threshold="0"
:right-options="options1"
@click="bindClick"
>
<view class="content-box" @click="contentClick">
<text class="content-text">使用数据填充</text>
</view>
</uni-swipe-action-item>
<uni-swipe-action-item @click="bindClick">
<template v-slot:left>
<view class="slot-button">
<text
class="slot-button-text"
@click="bindClick({position:'left',content:{text:'置顶'}})"
>置顶</text>
</view>
</template>
<view class="content-box" @click="contentClick">
<text class="content-text">使用左右插槽</text>
</view>
<template v-slot:right>
<view class="slot-button" @click="bindClick({position:'right',content:{text:'删除'}})"><text class="slot-button-text">删除</text></view>
</template>
</uni-swipe-action-item>
<uni-swipe-action-item
:right-options="options1"
@click="bindClick"
>
<template v-slot:left>
<view class="slot-button"><text
class="slot-button-text"
@click="bindClick({position:'left',content:{text:'置顶'}})"
>置顶</text></view>
</template>
<view class="content-box" @click="contentClick">
<text class="content-text">数据与插槽混合使用</text>
</view>
</uni-swipe-action-item>
</uni-swipe-action>
<uni-section
title="禁止滑动"
type="line"
></uni-section>
<uni-swipe-action>
<uni-swipe-action-item :disabled="true">
<view class="content-box">
<text class="content-text">禁止左右滚动</text>
</view>
</uni-swipe-action-item>
</uni-swipe-action>
<uni-section
title="使用变量控制开关"
type="line"
></uni-section>
<view class="example-body">
<view
class="button"
@click="setOpened"
>
<text class="button-text">当前状态:{{ isOpened }}</text>
</view>
</view>
<uni-swipe-action>
<uni-swipe-action-item
:left-options="options2"
: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>
<uni-section
title="swipe-action 列表"
type="line"
></uni-section>
<uni-swipe-action ref="swipeAction">
<uni-swipe-action-item
v-for="(item, index) in swipeList"
:right-options="item.options"
:key="item.id"
@change="swipeChange($event, index)"
@click="swipeClick($event, index)"
>
<view class="content-box">
<text class="content-text">{{ item.content }}</text>
</view>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
</template>