# SwiperOut 侧滑菜单 - 图1 Wuss-weapp

首页

组件库

快速上手

GitHub

首页

组件库

快速上手

GitHub

基础组件

  • 布局

  • 导航

  • 操作反馈

  • 表单

# SwiperOut 侧滑菜单

# 使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-swiper-out": "wuss-weapp/w-swiper-out/index",
  3. }

# 视频演示

# 代码演示

  1. <w-pane title="SwiperOut" desc="侧滑菜单" />
  3. <w-pane desc="Default" />
  4. <w-swiper-out 
  5.   swiperOutBtns="{{ btns1 }}"
  6.   data-itemid="sdadasdas123"
  7.   bind:delete="delete"
  8.   bind:edit="edit"
  9.   bind:added="added"
  10. >
  11.   <view class="example-content" style="" >
  12.      Example Content
  13.   </view>
  14. </w-swiper-out>
  17. <w-pane desc="Multiple" />
  18. <w-swiper-out 
  19.   swiperOutBtns="{{ btns2 }}"
  20.   bind:delete="delete"
  21.   bind:edit="edit"
  22.   bind:added="added"
  23. >
  24.   <view class="example-content" style="" >
  25.      Example Content
  26.   </view>
  27. </w-swiper-out>
  30. <w-pane desc="ButtonWidth = 50" />
  31. <w-swiper-out 
  32.   swiperOutBtns="{{ btns2 }}"
  33.   bind:delete="delete"
  34.   bind:edit="edit"
  35.   bind:added="added"
  36.   buttonWidth="50"
  37. >
  38.   <view class="example-content" style="" >
  39.      Example Content
  40.   </view>
  41. </w-swiper-out>
  44. <w-pane desc="Close = True" />
  45. <w-swiper-out 
  46.   close
  47.   swiperOutBtns="{{ btns1 }}"
  48.   bind:delete="delete"
  49.   bind:edit="edit"
  50.   bind:added="added"
  51. >
  52.   <view class="example-content" style="" >
  53.      Example Content
  54.   </view>
  55. </w-swiper-out>
  57. <w-pane desc="Threshold = 0.7" />
  58. <w-swiper-out 
  59.   swiperOutBtns="{{ btns1 }}"
  60.   bind:delete="delete"
  61.   bind:edit="edit"
  62.   bind:added="added"
  63.   threshold=".7"
  64. >
  65.   <view class="example-content" style="" >
  66.      Example Content
  67.   </view>
  68. </w-swiper-out>
  71. <w-pane desc="AutoClose = False" />
  72. <w-swiper-out 
  73.   autoClose="{{false}}"
  74.   swiperOutBtns="{{ btns2 }}"
  75.   bind:delete="delete"
  76.   bind:edit="edit"
  77.   bind:added="added"
  78. >
  79.   <view class="example-content" style="" >
  80.      Example Content
  81.   </view>
  82. </w-swiper-out>
  85. <w-pane desc="Disabled = True" />
  86. <w-swiper-out 
  87.   disabled
  88.   swiperOutBtns="{{ btns2 }}"
  89.   bind:delete="delete"
  90.   bind:edit="edit"
  91.   bind:added="added"
  92. >
  93.   <view class="example-content" style="" >
  94.      Example Content
  95.   </view>
  96. </w-swiper-out>
  99. <w-pane desc="BackgroundColor = f8f8f8" />
  100. <w-swiper-out 
  101.   backgroundColor="#f8f8f8"
  102.   swiperOutBtns="{{ btns2 }}"
  103.   bind:delete="delete"
  104.   bind:edit="edit"
  105.   bind:added="added"
  106. >
  107.   <view class="example-content" style="" >
  108.      Example Content
  109.   </view>
  110. </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 根节点样式类

Edit this page

← CountUp 指数 Marquee 垂直滚动视图 →