更新记录

1.0.8（2025-06-13） 下载此版本

修改文档

1.0.0（2025-06-13） 下载此版本

底部上弹菜单列表

平台兼容性

uni-app x

其他

Actionsheet

介绍

从底部向上弹出操作菜单。 类似uni.showActionSheet。 是showActionSheet功能的增强版，在移动端和PC端都有很好的展示效果！

Github地址

https://github.com/shawyuu/js-plugin/tree/main/actionSheet

开始使用

插件市场安装

在插件市场右上角选择 使用HBuilder X导入插件

//引入
import ActionSheet from "@/uni_modules/yu-actionSheet/js_sdk"

npm安装

npm install @shawyu/actionsheet

//引入
import ActionSheet from '@shawyu/actionsheet'

使用

ActionSheet.show({
    title: 'ActionSheet Title',
    itemList: ['A', 'B', 'C'],
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

全属性设置

ActionSheet.show({
    title: 'ActionSheet Title',/*标题名称*/
    size:16,/*标题字体大小*/
    bold:true, /*标题加粗*/
    align:"center", /*center、left,当网格为false时生效*/
    closeText:"取消",
    grid:false,
    itemList: ['A', 'B', 'C'],
    itemColor:'#f00',
    itemSize:15, /*当网格为false时生效*/
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

数组中的项目可以混合使用。您可以将特定项目单独设置为对象。如果对象包含“color”或“font”属性，则当前项目的“color”和“font”将根据对象的设置进行设置，优先级高于“itemColor”和“itemSize”。

ActionSheet.show({
    itemList: [{name:'A',desc:'this is A',color:'#0f0',size:16}, 'B', 'C'],
    itemColor:'#f00', /* 第一项的此值将无效，其颜色将显示为“#0f0”。 */
    itemSize:15, /* 第一个项目的值将无效，其字体大小将显示为16px。 */
    success: (res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

所有属性

itemList 说明