actionsheet动作面板

上拉/下拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。

非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。

参数

属性	类型	默认值	可选值	说明
mask	Boolean	true	-	是否添加遮罩层
show	Boolean	false	-	控制弹窗显示/隐藏
title	String	""	-	弹窗标题
titleStyle	String	""	-	标题样式
subtitle	String	''	-	子标题
subtitleStyle	String	""	-	子标题样式
options	Array	[]	--	选项
showCancel	Boolean	true	-	是否展示取消按钮
cancelText	String	''	--	取消按钮位内容
cancelStyle	String	''	--	取消按钮位样式
styleZindex	Number	1000	--	层级

回调

属性	类型	说明
onItemClick	Function	按钮执行点击选项事件后返回
onClose	Function	关闭事件后返回

示例代码

<view>
  <fs-page title="actionsheet" c-bind:onMounted="onMounted">
    <view class="page">
      <scroll-view class="scroll" style="height: {{dScrollHeight}}px" scroll-y="true">
        <fs-divider tip="不带标题"></fs-divider>
        <fs-button class="button" type="primary" text="点我试试" plain="{{true}}" bindtap="onTap"></fs-button>

        <fs-divider tip="带标题"></fs-divider>
        <fs-button class="button" type="primary" text="点我试试" plain="{{true}}" bindtap="onTap" data-type="1"></fs-button>

        <fs-divider tip="带子标题"></fs-divider>
        <fs-button class="button" type="primary" text="点我试试" plain="{{true}}" bindtap="onTap" data-type="2"></fs-button>

        <fs-divider tip="多选项"></fs-divider>
        <fs-button class="button" type="primary" text="点我试试" plain="{{true}}" bindtap="onTap" data-type="3"></fs-button>
      </scroll-view>
    </view>
    <fs-actionsheet show="{{show}}" title="{{title}}" title-style="{{titleStyle}}" subtitle="{{subtitle}}" subtitle-style="{{subtitleStyle}}" options="{{options}}" bindonClose="onClose" bindonItemClick="onItemClick">
    </fs-actionsheet>
  </fs-page>
</view>

// testPages/testActionsheet/testActionsheet.js
const paramConfig = {
  1: {
    title: 'fxiaoke'
  },
  2: {
    title: 'fxiaoke',
    titleStyle: "color: red",
    subtitle: 'subtitle',
    subtitleStyle: "color: green"
  },
  3: {
    // title: 'fxiaoke',
    options: [
      {
        label: '2',
        subtitle: 'subtitle\nsdsdsds\nsdsd',
        subStyle: 'color: red;'
      },
      { label: '2sds d sds s s sd s s s ds sd ss s s\nsdsdsdssdsdssdsds \n khkhkh \n hhhhjhfyfujfhgfhfhfgfghfghfghfhfhgrfuyruytfhfhftfthfhtfhfhfhyfh' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' },
      { label: '2' }
    ]
  }
}


Page({
  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    title: '',
    subtitle: '',
    options: [],
    dScrollHeight: 500
  },

  onTap(event) {
    const { type } = event.target.dataset;
    let param = {
      title: '',
      titleStyle: '',
      subtitle: '',
      subtitleStyle: '',
      options: [
        { label: '2' }, { label: '2' }, { label: '2' }
      ]
    }
    param = Object.assign(param, paramConfig[type] || {})
    // Object.keys(param).forEach((key) => {
    //   this[key] = param[key]
    // });
    this.setData({
      title: param.title,
      titleStyle: param.titleStyle,
      subtitle: param.subtitle,
      subtitleStyle: param.subtitleStyle,
      options: param.options,
      show: true
    });
  },
  onItemClick(e) {
    console.log(e)
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  onMounted(e) {
    this.setData({
      dScrollHeight: e.detail.mainHeight
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{
  "usingComponents": {
    "fs-divider": "ava-ui/fxui/Divider/Divider",
    "fs-actionsheet": "ava-ui/fxui/Actionsheet/Actionsheet",
    "fs-button": "ava-ui/fxui/Button/Button"
  }
}