从底部弹出的动作菜单面板。

参数

属性	类型	默认值	可选值	说明
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,
        });
    }
});

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