actionsheet action panel

The pull-up/pull-down menu (ActionSheet) allows the user to select options through the pop-up box.

Very dangerous options will be highlighted in red for people to recognize at the first time. You can make it disappear by clicking the cancel button or clicking the blank space.

parameter

Attributes	type	Defaults	optional value	illustrate
mask	Boolean	true	-	whether to add a mask layer
show	Boolean	false	-	Control popup show/hide
title	String	""	-	Popup title
titleStyle	String	""	-	title style
subtitle	String	''	-	subheading
subtitleStyle	String	""	-	subtitle style
options	Array	[]	--	Options
showCancel	Boolean	true	-	Whether to display the cancel button
cancelText	String	''	--	Cancel button bit content
cancelStyle	String	''	--	Cancel button bit style
styleZindex	Number	1000	--	Hierarchy

callback

Attributes	type	illustrate
onItemClick	Function	The button returns after the click option event is executed
onClose	Function	return after closing event

sample code

<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": "../../../package/fxui/Divider/Divider",

    "fs-actionsheet": "../../../package/fxui/Actionsheet/Actionsheet",
    "fs-button": "../../../package/fxui/Button/Button"
  }
}