English
fs-actionsheet
About 403 wordsAbout 1 min
2025-04-28
An action menu panel that pops up from the bottom.
Parameters
| Property | Type | Default | Optional Values | Description |
|---|---|---|---|---|
| mask | Boolean | true | - | Whether to add a mask layer |
| show | Boolean | false | - | Controls show/hide state |
| title | String | "" | - | Popup title |
| titleStyle | String | "" | - | Title style |
| subtitle | String | '' | - | Subtitle |
| subtitleStyle | String | "" | - | Subtitle style |
| options | Array | [] | -- | Options |
| showCancel | Boolean | true | - | Whether to show the cancel button |
| cancelText | String | '' | -- | Cancel button text |
| cancelStyle | String | '' | -- | Cancel button style |
| styleZindex | Number | 1000 | -- | z-index |
Callbacks
| Property | Type | Description |
|---|---|---|
| onItemClick | Function | Returned after clicking an option |
| onClose | Function | Returned after closing |
Example 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="Without Title"></fs-divider>
<fs-button
class="button"
type="primary"
text="Try It"
plain="{{true}}"
bindtap="onTap"
></fs-button>
<fs-divider tip="With Title"></fs-divider>
<fs-button
class="button"
type="primary"
text="Try It"
plain="{{true}}"
bindtap="onTap"
data-type="1"
></fs-button>
<fs-divider tip="With Subtitle"></fs-divider>
<fs-button
class="button"
type="primary"
text="Try It"
plain="{{true}}"
bindtap="onTap"
data-type="2"
></fs-button>
<fs-divider tip="Multiple Options"></fs-divider>
<fs-button
class="button"
type="primary"
text="Try It"
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: {
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({
/**
* Initial page data
*/
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] || {});
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"
}
}