uniapp点击按钮从底部弹出操作菜单

雨点打透心脏的1/2处 2022-10-30 08:25 710阅读 0赞

# uni.showActionSheetuni #

> 从底部向上弹出操作菜单

uni.showActionSheet({
        itemList: ['A', 'B', 'C'],
        success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        },
        fail: function (res) {
            console.log(res.errMsg);
        }
    });

## 一.OBJECT参数 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">itemList</td> 
   <td align="left">Array</td> 
   <td align="left">按钮的文字数组</td> 
  </tr> 
  <tr> 
   <td align="left">itemColor</td> 
   <td align="left">HexColor</td> 
   <td align="left">按钮的文字颜色，字符串格式，默认为"#000000"</td> 
  </tr> 
  <tr> 
   <td align="left">popover</td> 
   <td align="left">Object</td> 
   <td align="left">大屏设备弹出原生选择按钮框的指示区域，默认居中显示</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">Function</td> 
   <td align="left">接口调用成功的回调函数，详见返回参数说明</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">Function</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">Function</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

## 二.**popover**值 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">top</td> 
   <td align="left">Number</td> 
   <td align="left">指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度</td> 
  </tr> 
  <tr> 
   <td align="left">left</td> 
   <td align="left">Number</td> 
   <td align="left">指示区域坐标</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">Number</td> 
   <td align="left">指示区域宽度</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">Number</td> 
   <td align="left">指示区域高度</td> 
  </tr> 
 </tbody> 
</table>

## 三.success返回参数 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">tapIndex</td> 
   <td align="left">Number</td> 
   <td align="left">用户点击的按钮，从上到下的顺序，从0开始</td> 
  </tr> 
 </tbody> 
</table>