基础组件
布局
导航
操作反馈
表单
# SwiperOut 侧滑菜单
# 使用指南
在 page.json 中引入组件
"usingComponents": {
"w-swiper-out": "wuss-weapp/w-swiper-out/index",
}
# 视频演示
# 代码演示
<w-pane title="SwiperOut" desc="侧滑菜单" />
<w-pane desc="Default" />
<w-swiper-out
swiperOutBtns="{{ btns1 }}"
data-itemid="sdadasdas123"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="Multiple" />
<w-swiper-out
swiperOutBtns="{{ btns2 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="ButtonWidth = 50" />
<w-swiper-out
swiperOutBtns="{{ btns2 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
buttonWidth="50"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="Close = True" />
<w-swiper-out
close
swiperOutBtns="{{ btns1 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="Threshold = 0.7" />
<w-swiper-out
swiperOutBtns="{{ btns1 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
threshold=".7"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="AutoClose = False" />
<w-swiper-out
autoClose="{{false}}"
swiperOutBtns="{{ btns2 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="Disabled = True" />
<w-swiper-out
disabled
swiperOutBtns="{{ btns2 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
<w-pane desc="BackgroundColor = f8f8f8" />
<w-swiper-out
backgroundColor="#f8f8f8"
swiperOutBtns="{{ btns2 }}"
bind:delete="delete"
bind:edit="edit"
bind:added="added"
>
<view class="example-content" style="" >
Example Content
</view>
</w-swiper-out>
data: {
btns1: [
{
text: '添加',
color: '#ffffff',
background: '#28a745',
disabled: false,
size: '14px',
type: 'added',
},
{
text: '删除',
color: '#ffffff',
background: '#e42112',
disabled: false,
size: '14px',
type: 'delete',
},
],
btns2: [
{
text: '添加',
color: '#ffffff',
background: '#28a745',
disabled: false,
size: '14px',
type: 'added',
},
{
text: '编辑',
color: '#ffffff',
background: '#ff8800',
disabled: false,
size: '14px',
type: 'edit',
},
{
text: '删除',
color: '#ffffff',
background: '#e42112',
disabled: false,
size: '14px',
type: 'delete',
},
],
},
added() {
wx.showModal({
title: '提示',
content: 'added',
showCancel: false,
});
},
delete(e) {
wx.showModal({
title: '提示',
content: 'delete',
showCancel: false,
});
},
edit() {
wx.showModal({
title: '提示',
content: 'edit',
showCancel: false,
});
},
handleBtnClick(e) {
const { onPress } = e.detail;
onPress.call(this);
},
.example-content {
display: flex;
align-items: center;
padding: 0 10px;
}
# API
# Attribute 属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
swiperOutBtns | 侧滑菜单按钮列表参数有 text,color,background,disabled | array | [] |
backgroundColor | 背景颜色 | string | - |
buttonWidth | 按钮的宽度 | number | - |
height | 容器的高度 | number | - |
threshold | 侧滑触发的阀值 | number | - |
close | 是否展开 | boolean | false |
autoClose | 点击按钮自动收起 | boolean | false |
disabled | 禁用侧滑菜单 | boolean | false |
# Event 事件
事件名 | 说明 | 参数 |
---|
# Slot 插槽
名称 | 说明 |
---|
# Class 自定义类名
类名 | 说明 |
---|---|
wuss-class | 根节点样式类 |