# 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": "../../../package/fxui/Divider/Divider",
"fs-actionsheet": "../../../package/fxui/Actionsheet/Actionsheet",
"fs-button": "../../../package/fxui/Button/Button"
}
}