Sheet上拉菜单

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-sheet": "/miniprogram_npm/vtuweapp/sheet/vtu-sheet"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-btn type="primary" bind:click="showSheet1">弹出菜单</vtu-btn>
    2. <vtu-sheet show="{{show1}}" sheetList="{{sheetList1}}" bind:select="bindSelect1"></vtu-sheet>
    4. Page({
    5.   data: {
    6.     show1: false,
    7.     sheetList1: [
    8.       {
    9.         label: '选项（异步）',
    10.         desc: '确定删除吗?删除后无法恢复哦~',
    11.         loading: false,
    12.         async: true
    13.       },
    14.       {
    15.         label: '禁用选项',
    16.         disabled: true
    17.       },
    18.       {
    19.         label: '删除',
    20.         color: 'red',
    21.         loading: false,
    22.         icon: 'iconfont icon-picture-delet'
    23.       }
    24.     ]
    25.   },
    27.   showSheet1: function() {
    28.     this.setData({
    29.       show1: true
    30.     })
    31.   },
    33.   bindSelect1: function(e) {
    34.     let self = this
    35.     let index = e.detail.index;
    37.     switch (index) {
    38.       case 0:
    39.         setTimeout(function() {
    40.           self.setData({
    41.             show1: false
    42.           })
    43.         }, 1000)
    44.         break;
    45.       case 2:
    46.         setTimeout(function() {
    47.           self.setData({
    48.             show1: false
    49.           })
    50.         }, 1000)
    51.         break;
    52.     }
    53.   }
    54. });
    55.  
    56.

    微信开放能力

    <vtu-btn type="primary" bind:click="showSheet2">弹出菜单</vtu-btn>
<vtu-sheet show="{{show2}}" sheetList="{{sheetList2}}" bind:getuserinfo="getUserInfo" bind:getphonenumber="getPhoneNumber"></vtu-sheet>

Page({
  data: {
    show2: false,
    sheetList2: [
      {
        label: '分享',
        openType: 'share',
        icon: 'iconfont icon-share'
      },
      {
        label: '注册账号',
        openType: 'getUserInfo'
      },
      {
        label: '注册手机号',
        openType: 'getPhoneNumber'
      },
      {
        label: '打开客服',
        openType: 'contact'
      },
      {
        label: '打开授权设置页',
        openType: 'openSetting'
      },
      {
        label: '意见反馈',
        openType: 'feedback'
      }
    ]
  },

  showSheet2: function() {
    this.setData({
      show2: true
    })
  },

  getUserInfo: function(e) {
    wx.showToast({
      title: "获取用户信息成功！",
      icon: 'none',
      duration: 2000
    });
    console.log("getUserInfo: ", e)
  },

  getPhoneNumber: function(e) {
    wx.showToast({
      title: "获取用户手机号成功！",
      icon: 'none',
      duration: 2000
    });
    console.log("getPhoneNumber: ", e)
  }
});

    组件参数

    Props

    参数说明类型默认值必填
    show下拉菜单是否显示Booleanfalse否
    closeOnClickOverlay点击遮罩是否关闭菜单Booleantrue否
    show-overlay是否显示遮罩层Booleantrue否
    show-cancel是否显示取消按钮Booleantrue否
    cancel-label取消按钮文案String取消否
    sheet-list上拉菜单按钮列表Array-否

    SheetList Props

    按钮属性参数

    参数说明类型默认值必填
    label按钮文字String-否
    desc按钮描述String-否
    loading加载状态Booleanfalse否
    async是否异步Booleanfalse否
    disabled是否禁用Booleanfalse否
    color按钮文字颜色String-否
    openType开放能力，具体参考微信开放文档String-否

    Events

    事件说明返回值
    bind:select菜单点击事件event.detail = {index}，index为选择按钮索引
    bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息， 从返回参数的 detail 中获取到的值同 wx.getUserInfo同 wx.getUserInfo
    bind:getphonenumber获取用户手机号回调同 wx.getphonenumber
    bind:contact客服消息回调同 wx.contact
    bind:error当使用开放能力时，发生错误的回调同 wx.error
    bind:opensetting在打开授权设置页后回调同 wx.opensetting
    bind:launchapp打开 APP 成功的回调，open-type=launchApp时有效同 wx.launchapp

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Sheet 上拉菜单 - 图1