Swipeout 滑动菜单

概述

与 iOS 原生的滑动操作交互类似，可通过滑动显示操作菜单。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-swipeout": "../../dist/swipeout/index"
  3. }

示例

  1. <view class="i-swipeout-demo">
  2.     <view class="i-swipeout-demo-title">基础用法</view>
  3.     <view class="i-swipeout-demo-des">
  4.         注: 1、设置uncloseable为true时点击按钮不能关闭,必须联合toggle2来实现
  5.         2、如果传递action的话必须传递width来设置每个按钮的宽度
  6.     </view>
  7.     <i-swipeout  i-class="i-swipeout-demo-item" actions="{{actions}}">
  8.         <view slot="content">
  9.             <i-cell 
  10.                 i-class="i-cell-padding" 
  11.                 title="猛虫过江" 
  12.                 label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
  13.             </i-cell>
  14.         </view>
  15.     </i-swipeout>
  16.     <i-swipeout  i-class="i-swipeout-demo-item" actions="{{actions}}" toggle="{{toggle2}}" unclosable="{{true}}">
  17.         <view slot="content">
  18.             <i-cell 
  19.                 i-class="i-cell-padding" 
  20.                 title="点击按钮不可关闭" 
  21.                 label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
  22.             </i-cell>
  23.         </view>
  24.     </i-swipeout>
  25.     <i-swipeout  i-class="i-swipeout-demo-item" actions="{{actions}}" toggle="{{toggle2}}" unclosable="{{true}}" bindchange="handlerCloseButton">
  26.         <view slot="content">
  27.             <i-cell 
  28.                 i-class="i-cell-padding" 
  29.                 title="可点击按钮关闭" 
  30.                 label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
  31.             </i-cell>
  32.         </view>
  33.     </i-swipeout>
  36.     <view class="i-swipeout-demo-title">自定义右侧Button</view>
  37.     <view class="i-swipeout-demo-des">注: 右侧必须设置固定宽度。默认宽度160px</view>
  38.     <i-swipeout  i-class="i-swipeout-demo-item" operateWidth="{{210}}">
  39.         <view slot="content">
  40.             <i-cell 
  41.                 i-class="i-cell-padding" 
  42.                 title="猛虫过江" 
  43.                 label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
  44.             </i-cell>
  45.         </view>
  46.         <view slot="button" class="i-swipeout-demo-button-group">
  47.             <view class="i-swipeout-demo-button">点赞</view>
  48.             <view class="i-swipeout-demo-button">分享</view>
  49.             <view class="i-swipeout-demo-button">删除</view>
  50.         </view>
  51.     </i-swipeout>
  52.     <i-swipeout  i-class="i-swipeout-demo-item" operateWidth="{{180}}">
  53.         <view slot="content">
  54.             <i-cell 
  55.                 i-class="i-cell-padding" 
  56.                 title="猛虫过江" 
  57.                 label="侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有四年">
  58.             </i-cell>
  59.         </view>
  60.         <view slot="button" class="i-swipeout-demo-button-group" style="background:#2db7f5;">
  61.             <view class="i-swipeout-demo-button" style="width:60px"> <i-icon size="32" type="like_fill"></i-icon></view>
  62.             <view class="i-swipeout-demo-button" style="width:60px"><i-icon size="32" type="share_fill"></i-icon></view>
  63.             <view class="i-swipeout-demo-button" style="width:60px"><i-icon size="32" type="delete_fill"></i-icon></view>
  64.         </view>
  65.     </i-swipeout>
  68.     <view class="i-swipeout-demo-title">和actionsheet联合使用</view>
  69.     <i-action-sheet visible="{{ visible2 }}" actions="{{ actions2 }}" show-cancel bind:cancel="handleCancel2" bind:click="handleClickItem2" mask-closable="{{ false }}">
  70.         <view slot="header" style="padding: 16px">
  71.             <view style="color: #444;font-size: 16px">确定吗？</view>
  72.             <text>删除后无法恢复哦</text>
  73.         </view>
  74.     </i-action-sheet>
  75.     <i-swipeout  i-class="i-swipeout-demo-item" operateWidth="{{180}}" unclosable="{{true}}" toggle="{{toggle}}">
  76.         <view slot="content">
  77.             <view class="i-swipeout-image">
  78.                 <i-icon size="20" color="#FFFFFF" type="feedback_fill"></i-icon>
  79.            </view>
  80.            <view class="i-swipeout-des">
  81.                 <view class="i-swipeout-des-h2">第七个小矮人</view>
  82.                 <view class="i-swipeout-des-detail">乐观善良的7个小矮人原本过着简单快乐的生活，不料诅咒公主的巫婆利用小矮人进入.</view>
  83.            </view>
  84.         </view>
  85.         <view slot="button" class="i-swipeout-demo-button-group" style="background:#2db7f5;">
  86.             <view class="i-swipeout-demo-button" style="width:60px" bindtap="actionsTap"> <i-icon size="32" type="like_fill"></i-icon></view>
  87.             <view class="i-swipeout-demo-button" style="width:60px" bindtap="actionsTap"><i-icon size="32" type="share_fill"></i-icon></view>
  88.             <view class="i-swipeout-demo-button" style="width:60px" bindtap="actionsTap"><i-icon size="32" type="delete_fill"></i-icon></view>
  89.         </view>
  90.     </i-swipeout>
  92.     <view class="i-swipeout-demo-title">自定义样式</view>
  93.     <i-swipeout  i-class="i-swipeout-demo-item" actions="{{actions}}">
  94.         <view slot="content">
  95.            <view class="i-swipeout-image" style="background:#ff9900;">
  96.                 <i-icon size="20" color="#FFFFFF" type="coupons_fill" />
  97.            </view>
  98.            <view class="i-swipeout-des">
  99.                 <view class="i-swipeout-des-h2">第七个小矮人</view>
  100.                 <view class="i-swipeout-des-detail">乐观善良的7个小矮人原本过着简单快乐的生活，不料诅咒公主的巫婆利用小矮人进入.</view>
  101.            </view>
  102.         </view>
  103.     </i-swipeout>
  104. </view>
  1. const { $Message } = require('../../dist/base/index');
  3. Page({
  4.     data : {
  5.         visible2: false,
  6.         //小程序没有refs，所以只能用动态布尔值控制关闭
  7.         toggle : false,
  8.         toggle2 : false,
  9.         actions2: [
  10.             {
  11.                 name: '删除',
  12.                 color: '#ed3f14'
  13.             }
  14.         ],
  15.         actions : [
  16.             {
  17.                 name : '喜欢',
  18.                 color : '#fff',
  19.                 fontsize : '20',
  20.                 width : 100,
  21.                 icon : 'like',
  22.                 background : '#ed3f14'
  23.             },
  24.             {
  25.                 name : '返回',
  26.                 width : 100,
  27.                 color : '#80848f',
  28.                 fontsize : '20',
  29.                 icon : 'undo'
  30.             }
  31.         ]
  32.     },
  33.     handleCancel2 () {
  34.         this.setData({
  35.             visible2: false,
  36.             toggle : this.data.toggle ? false : true
  37.         });
  38.         console.log( this.data.toggle,111111111 )
  39.     },
  40.     handleClickItem2 () {
  41.         const action = [...this.data.actions2];
  42.         action[0].loading = true;
  44.         this.setData({
  45.             actions2: action
  46.         });
  48.         setTimeout(() => {
  49.             action[0].loading = false;
  50.             this.setData({
  51.                 visible2: false,
  52.                 actions2: action,
  53.                 toggle: this.data.toggle ? false : true
  54.             });
  56.         }, 2000);
  57.     },
  58.     handlerCloseButton(){
  59.         this.setData({
  60.             toggle2: this.data.toggle2 ? false : true
  61.         });
  62.     },
  63.     actionsTap(){
  64.         this.setData({
  65.             visible2: true
  66.         });
  67.     }
  68. });

API

Swipeout properties

属性说明类型默认值
i-class自定义 class 类名String-
actions按钮组，具体项参照后面的表格Array[]
unclosable点击菜单时，是否收起Booleanfalse
toggle当此值由 false 转为 true 时，收起菜单Booleanfalse
operate-width菜单项的总宽度Number160

Swipeout events

事件名说明返回值
bind:change点击菜单项时触发index

Swipeout slot

名称说明
content菜单内容
button自定义按钮组

Swipeout actions

属性说明类型默认值
name按钮文案String-
icon按钮图标String-
color按钮文字的颜色String-
fontsize字号String-
width宽度String-
background背景色String-