tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-21
955
3.8m

x-actionmodal-s 底部内容抽屉 ​

从底部弹出的内容抽屉，用来展示引导、说明、协议摘要等「页式」内容。结构是顶标题 + 中间内容 + 底栏操作（含安全区），视觉对齐 x-actionsheet-s 的通栏/非通栏，按钮对齐 x-modal-s 的分离圆角。

微信内使用官方 uni.showModal 降级，不展示图片和左右翻页动画，仅保留标题、文案和上一条/下一条/确认。

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持支持支持（官方对话框降级）

调用 ​

ts
import { showActionModal, hideActionModal, XActionModalOptions, XActionModalItem } from "@/uni_modules/x-actionmodal-s"

showActionModal({
  title: "功能介绍",
  content: [
    {
      image: "https://img.yzcdn.cn/vant/cat.jpeg",
      imageWidth: 96,
      imageHeight: 96,
      title: "欢迎使用",
      subtitle: "左右翻页查看说明"
    } as XActionModalItem,
    {
      image: "https://img.yzcdn.cn/vant/apple-1.jpg",
      imageWidth: 96,
      imageHeight: 96,
      title: "第二步",
      subtitle: "点下一条继续"
    } as XActionModalItem
  ] as XActionModalItem[],
  success: (res) => {
    console.log("确认", res.index, res.item.title)
  },
  fail: (err) => {
    console.log("取消", err.errMsg)
  },
  complete: () => {
    console.log("结束")
  }
} as XActionModalOptions)

主动关闭：

ts
hideActionModal()

底栏规则 ​

位置按钮
只有 1 条确认
多条的第一条下一条
多条的中间上一条 + 下一条
多条的最后一条上一条 + 确认

上一条为灰按钮，下一条 / 确认为主色。多条切换带左右滚动动画，不支持手势滑动。

参数 ​

XActionModalItem

字段说明默认
image图片地址，http(s) 或本地路径""
imageWidth图片宽 px80
imageHeight图片高 px80
title主标题""
titleSize主标题字号 px16
titleColor主标题色#111111
subtitle副标题""
subtitleSize副标题字号 px13
subtitleColor副标题色#888888

XActionModalOptions

字段说明默认
title顶栏标题提醒
content内容页数组必填
current打开时停留的页，从 0 开始0
space非通栏留白；false 为通栏贴边true
round圆角 px16
overlayClick点遮罩关闭true
isSplitBtn分离圆角按钮true
maskBgColor遮罩色rgba(0,0,0,0.35)
contentBgColor面板底色#ffffff
titleColor顶栏标题色#111111
closeIconColor右上角关闭图标色#999999
prevText上一条上一条
nextText下一条下一条
confirmText确认确认
prevBgColor上一条背景#f5f5f5
prevColor上一条文字色#333333
confirmBgColor下一条/确认背景#0579FF
confirmColor下一条/确认文字色#FFFFFF
duration入场/离场动画 ms350
pageDuration翻页动画 ms280
maxHeight内容最大高度 px，0 为自动高并限制在屏高 45%0
confirm点确认-
cancel取消 / 遮罩 / 关闭图标 / 手势返回-
close关闭完成-
success确认成功，含 index 和当前 item-
fail取消或失败-
complete结束（成功或失败都会走）-

平台差异 ​

  1. 微信小程序：uni.showModal 连续弹层模拟翻页，最多展示标题和副标题，图片与左右滚动动画不生效。
  2. 关闭图标使用插件内独立字体 x-actionmodal-remixicon.ttf，避免和其它插件的 remixicon.ttf 冲突。Web 字体族名为 x-actionmodal-remixicon，文件走全局 /static/tmui4xLibs/static/remixicon.ttf。

版本 ​

版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。

更新日志 ​

1.0.0（2026-08-15） ​

  • 新增 x-actionmodal-s：底部弹出内容抽屉，顶标题 + 右上角关闭 + 内容自动高 + 底栏操作（含安全区）。
  • content 为数组：图片（宽高）+ 标题 + 副标题。单条只显示确认；多条左右翻页动画，不支持手势滑动。
  • 第一条仅「下一条」，中间「上一条 + 下一条」，末条「上一条 + 确认」。按钮分离圆角，上一条灰、下一条/确认主色。
  • 支持通栏 / 非通栏。事件对齐 DCloud：success / fail / complete，并提供 confirm / cancel / close。
  • App 三端使用独立字体 x-actionmodal-remixicon.ttf；微信官方 Modal 降级，不展示图片和翻页动画。
最近更新