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>
  1. data: {
  2.   btns1: [
  3.     {
  4.       text: '添加',
  5.       color: '#ffffff',
  6.       background: '#28a745',
  7.       disabled: false,
  8.       size: '14px',
  9.       type: 'added',
  10.     },
  11.     {
  12.       text: '删除',
  13.       color: '#ffffff',
  14.       background: '#e42112',
  15.       disabled: false,
  16.       size: '14px',
  17.       type: 'delete',
  18.     },
  19.   ],
  20.   btns2: [
  21.     {
  22.       text: '添加',
  23.       color: '#ffffff',
  24.       background: '#28a745',
  25.       disabled: false,
  26.       size: '14px',
  27.       type: 'added',
  28.     },
  29.     {
  30.       text: '编辑',
  31.       color: '#ffffff',
  32.       background: '#ff8800',
  33.       disabled: false,
  34.       size: '14px',
  35.       type: 'edit',
  36.     },
  37.     {
  38.       text: '删除',
  39.       color: '#ffffff',
  40.       background: '#e42112',
  41.       disabled: false,
  42.       size: '14px',
  43.       type: 'delete',
  44.     },
  45.   ],
  46. },
  47. added() {
  48.   wx.showModal({
  49.     title: '提示',
  50.     content: 'added',
  51.     showCancel: false,
  52.   });
  53. },
  54. delete(e) {
  55.   wx.showModal({
  56.     title: '提示',
  57.     content: 'delete',
  58.     showCancel: false,
  59.   });
  60. },
  61. edit() {
  62.   wx.showModal({
  63.     title: '提示',
  64.     content: 'edit',
  65.     showCancel: false,
  66.   });
  67. },
  68. handleBtnClick(e) {
  69.   const { onPress } = e.detail;
  70.   onPress.call(this);
  71. },
  1. .example-content {
  2.   display: flex;
  3.   align-items: center;
  4.   padding: 0 10px;
  5. }

API

Attribute 属性

属性说明类型默认值
swiperOutBtns侧滑菜单按钮列表参数有 text,color,background,disabledarray[]
backgroundColor背景颜色string-
buttonWidth按钮的宽度number-
height容器的高度number-
threshold侧滑触发的阀值number-
close是否展开booleanfalse
autoClose点击按钮自动收起booleanfalse
disabled禁用侧滑菜单booleanfalse

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

类名说明
wuss-class根节点样式类