x-moreshare-s 更多分享面板
从底部弹出的「更多 / 分享」面板，视觉对齐头条菜单更多：可选标题 + 宫格（图标或图片）+ cell 列表 + 取消。宫格支持单行横滑或自动断行；两区都可空，有才显示。
详细规划见同目录 PLAN.md。
微信内使用官方 uni.showActionSheet 降级，图标、图片、横滑、断行不生效，仅保留标题和文案。
兼容性
| Harmony | IOS | Android | WEB | 小程序 |
|---|---|---|---|---|
| 支持 | 支持 | 支持 | 支持 | 支持（官方菜单降级） |
调用
ts
import { showMoreShare, hideMoreShare, XMoreShareOptions, XMoreShareGridItem, XMoreShareCellItem } from "@/uni_modules/x-moreshare-s"
showMoreShare({
title: "分享到",
grids: [
{ id: "wechat", title: "微信", icon: "F2B6" } as XMoreShareGridItem,
{ id: "copy", title: "复制", icon: "ECD5" } as XMoreShareGridItem
] as XMoreShareGridItem[],
cells: [
{ id: "link", title: "复制链接", icon: "EEB8" } as XMoreShareCellItem,
{ id: "report", title: "举报", icon: "ED3B" } as XMoreShareCellItem
] as XMoreShareCellItem[],
gridClick: (index : number, item : XMoreShareGridItem) => {
console.log("宫格", index, item.title)
},
cellClick: (index : number, item : XMoreShareCellItem) => {
console.log("列表", index, item.title)
},
cancel: () => {
console.log("取消")
},
close: () => {
console.log("已关闭")
}
} as XMoreShareOptions)主动关闭：
ts
hideMoreShare()参数
XMoreShareGridItem
| 字段 | 说明 | 默认 |
|---|---|---|
| id | 条目标识 | g + 索引 |
| title | 下方标题 | "" |
| image | 图片地址，有则优先于 icon | "" |
| icon | Remix unicode，如 F2B6 | "" |
| iconBgColor | 圆角矩形背景 | #F5F5F5 |
| iconColor | 图标色 | #333333 |
| iconSize | 图标字号 px | 24 |
| iconBoxSize | 方块边长 px | 52 |
| iconBoxRound | 方块圆角 px | 12 |
| titleColor | 标题色 | #666666 |
| titleSize | 标题字号 px | 11 |
| disabled | 禁用 | false |
XMoreShareCellItem
| 字段 | 说明 | 默认 |
|---|---|---|
| id | 条目标识 | c + 索引 |
| title | 文案 | 必填语义 |
| icon | Remix，无框 | "" |
| iconColor | 图标色 | #333333 |
| iconSize | 图标字号 px | 18 |
| titleColor | 文案色 | #111111 |
| titleSize | 文案字号 px | 16 |
| showArrow | 右箭头 | true |
| disabled | 禁用 | false |
XMoreShareOptions
| 字段 | 说明 | 默认 |
|---|---|---|
| title | 顶栏标题，空则不显示 | "" |
| showTitle | 是否显示标题（标题为空时仍不显示） | true |
| grids | 宫格数组 | [] |
| gridMode | scroll 横滑 / wrap 断行 | scroll |
| cells | 列表数组 | [] |
| showCancel | 是否显示取消 | true |
| cancelText | 取消文字 | 取消 |
| cancelColor | 取消文字色 | #333333 |
| overlayClick | 点击遮罩关闭 | true |
| itemClickClose | 点击条目后关闭 | true |
| space | 非通栏时面板相对屏幕左右留白；false 为通栏贴边。中间内容区（宫格 + cell）左右 10px，标题和取消通栏；标题到内容、取消到内容各 10px。宫格区域块与 cell 列表块 12px 圆角 | true |
| round | 圆角 px | 16 |
| maxHeight | 内容最大高度 px，0 为屏高 80% | 0 |
| maskBgColor | 遮罩色 | rgba(0,0,0,0.35) |
| contentBgColor | 面板间隙色 | #f5f5f5 |
| cellBgColor | 条目底色 | #ffffff |
| titleColor | 标题色 | #888888 |
| arrowColor | 右箭头色 | #C8C8C8 |
| duration | 动画 ms | 350 |
| gridClick | 点击宫格 | - |
| cellClick | 点击列表 | - |
| cancel | 取消 / 遮罩 / 手势返回 | - |
| close | 关闭完成 | - |
| success | 点了宫格或 cell，含 type/index/id/title | - |
| fail | 取消或失败 | - |
| complete | 结束（成功或失败都会走） | - |
平台差异
- 微信小程序：
uni.showActionSheet，最多 6 条，宫格标题在前、cell 标题在后；图标、图片、横滑、断行、内容区内间距不生效。hideMoreShare为空实现。 - 关闭箭头与宫格图标使用插件内独立字体
x-moreshare-remixicon.ttf。Web 字体族名为x-moreshare-remixicon，文件走全局/static/tmui4xLibs/static/remixicon.ttf。
版本
版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。
更新日志
1.0.9（2026-08-17）
- iOS 宫格去掉多余顶距并按字体行高算高度，恢复底部 10px 内边距；cell 标题改回靠左跟图标对齐。
1.0.8（2026-08-17）
- 安卓单行宫格按文字实际行高撑开，避免标题底部被裁几个像素。
1.0.7（2026-08-17）
- wrap 宫格高度按实际行高收紧，避免标题/取消与内容之间被撑出大空隙。
1.0.6（2026-08-17）
- 原生单行宫格左对齐；wrap 按容器比例分列铺满，避免右边空一大块。
1.0.5（2026-08-17）
- Web 单行宫格改为横向滚动且不收缩挤叠，并隐藏滚动条。
1.0.4（2026-08-17）
- 标题/取消到内容的间距与内容左右 10px 对齐；wrap 按可用宽度等分列，避免 3 个就断行和高度虚高。
1.0.3（2026-08-17）
- 宫格区域块四角圆角；cell 列表作为一组，上左右 / 下左右圆角。
1.0.2（2026-08-17）
- 只有中间内容区（宫格 + cell）左右缩 10px，标题和取消仍通栏；标题到内容、取消到内容各 10px。
1.0.1（2026-08-17）
- 宫格 wrap 断行增加 8px 行距。微信官方菜单无法改布局。
1.0.0（2026-08-17）
- 新增 x-moreshare-s：头条风格底部更多面板，可选标题 + 宫格（横滑/断行）+ cell 列表 + 取消。
- App 三端使用独立字体
x-moreshare-remixicon.ttf；微信官方 ActionSheet 降级。