操作菜单 ActionSheet

同微信ActionSheet

ActionSheet组件有两种用法:

1 wx.lin.showActionSheet(object)，接近于微信原生API wx.showActionShee的调用方式.

2 常规组件的使用方式，通过更改传入的属性值来控制ActionSheet的显示和隐藏。

默认调用方式为wx.lin.showActionSheet。

基本使用

在使用wx.lin.showActionSheet的调用时，与组件的使用一致，需要在json文件中引入组件，且在wxml中写入action-sheet组件。

wx.lin.showActionSheet接受的参数是个对象，里面包含了所有与操作菜单相关的属性。

注意事项

必须传入itemList,且长度不能为0。

示例代码

<!-- wxml -->
<l-button l-class="button" size="large" bind:lintap="showActionSheet">操作</l-button>
<l-action-sheet/>

// js
showActionSheet(){
    wx.lin.showActionSheet({
      itemList: [
      { 
        name: '今日不再出现此类内容'
      },
      {
        name: '屏蔽'
      }
    ],
}

操作菜单子菜单

操作菜单的子菜单通过itemList设置，接收的是一个数组，数组长度不能超过 10，当长度超过10时，只显示前10个内容。

同时，数组的每个item是个对象，可传入的属性有：

• name：子菜单显示的内容，必填;
• icon：子菜单显示的图标;
• image：子菜单上的图片，显示在文字左侧。如果icon和image同时使用，则image的优先级高于icon；
• imageStyle：子菜单的样式；
• color：子菜单的文字颜色;
• openType：子菜单的微信开放能力，参看button

示例代码

itemList: [
    {
      name: '保存海报分享',
      image:'/images/response/picture.png', 
      imageStyle:'width:40rpx;height:40rpx;',
      color:'#3683D6'    
    },
    {
      name: '转发给好友',
      icon: 'share',
      color:'#F4516C',
      openType:'share'
      }
    ],

设置标题

通过在wx.lin.showActionSheet中传入title设置标题。

点击菜单子项和取消之后的回调函数

在wx.lin.showActionSheet中传入success和fail函数时，当点击操作菜单时，可触发传入的success函数，返回值包括所点击子菜单的位置索引和菜单的值；当点击背景蒙层或取消按钮时，触发fail函数。

关闭操作菜单

点击背景蒙层默认可以关闭操作菜单，通过在wx.lin.showActionSheet中传入locked:false，取消点击背景蒙层关闭操作菜单的功能。

通过改变showCancel的布尔值，设置是否显示取消按钮，默认不显示（false）；cancelText设置取消按钮的文字内容，默认为取消。

外部样式类

• l-class-title 用于修改操作菜单的标题的样式
• l-class-item 修改操作菜单子菜单的样式
• l-class-cancel 修改操作菜单取消区域的样式

第二种用法

通过设置open-api=false属性可关闭API调用，切换到组件使用模式。

设置组件show属性为true或false，可以控制action-sheet的显示和隐藏。

此外，可以给组件绑定点击操作菜单子菜单的点击事件(linitemtap)以及点击取消按钮和背景蒙层是的点击事件(lincancel)。

bind:linitemtap 的返回值在 e.detail 中，success 时返回值通过参数的形式返回。

示例代码

<!-- wxml -->
<l-button l-class="button" size="large" bind:lintap="toggleActionSheet">
    操作
</l-button>
<l-action-sheet open-api="{{false}}" show-cancel item-list="{{itemList}}" show="{{false}}"   
  bind:linitemtap="linItemtap" bind:lincancel="lincancel"/>

// js
 data: {
    show:false,
    itemList: [
      {
        name: '今日不再出现此类内容',
      },
      {
        name: '屏蔽',
      }
    ],
},
toggleActionSheet(){
    this.setData({
      show:true
    })
},
lincancel(){
    wx.showToast({
      title: '取消',
      icon: 'none'
    })
},
  lintapItem(e){
    wx.showToast({
      title: e.detail.item.name,
      icon: 'none'
    })
}

操作菜单属性 (ActionSheet Attributes）

操作菜单子菜单组（ActionSheet ItemList）

操作菜单事件 (ActionSheet Events）

操作菜单API调用参数（wx.lin.showActionSheet Attributes）