ActionSheet

ActionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
如果在 H5 页面原生实现这个功能还是有点麻烦的，在小程序中就比较容易，直接调用 API wx.showActionSheet()就可以了，mpvue框架对微信的 API 支持的也十分完美，因此在mpvue中就可以这样实现：

  1. <template>
  2.   <div class="page">
  3.     <div class="page__bd">
  4.       <div class="weui-btn-area">
  5.         <button type="default" @click="open">ActionSheet</button>
  6.       </div>
  7.     </div>
  8.   </div>
  9. </template>
  11. <script>
  12. import base64 from '../../../static/images/base64';
  13. export default {
  14.   data() {
  15.     return {
  16.       itemList:['A', 'B', 'C']
  17.     }
  18.   },
  19.   methods: {
  20.     open() {
  21.       let _this = this;
  22.       wx.showActionSheet({
  23.         itemList: this.itemList,
  24.         success: function (res) {
  25.           console.log("index：" + res.tapIndex, "用户选的值为：" + _this.itemList[res.tapIndex]);
  26.         }
  27.       });
  28.     }
  29.   }
  30. }
  31. </script>
  33. <style>
  34. page {
  35.   margin-top: 50px;
  36.   padding: 15px;
  37.   box-sizing: border-box;
  38. }
  39. </style>

说两个比较重要的参数

itemList

  • 类型：String Array
  • 必填：是
  • 说明：按钮的文字数组，数组长度最大为6个

success

  • 类型：Function
  • 必填：否
  • 说明：接口调用成功的回调函数，详见返回参数说明
success 参数说明

tapIndex

  • 类型：Number
  • 说明：用户点击的按钮项目，在itemList中所对应的索引值

tip：可以用res.tapIndex可以获取用户点击值所对应的索引值。

效果

actionsheet