amis CRUD 固定头被页面顶部遮挡怎么解决

amis CRUD 固定头被页面顶部遮挡怎么解决【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis在 amis 中用 CRUD 组件的 table 模式时固定表头affixHeader默认是开启的表格向下滚动时表头会吸附在视口顶部。如果你的页面本身还有一个固定在顶部的元素导航栏、页头等滚动时吸附上去的表头就会和它发生重叠出现 FAQ 中描述的“CRUD 顶部有重叠遮挡”现象。本文给出两种处理方式给固定表头设置顶部偏移量或者直接关闭固定表头。先确认是不是这个问题对照 常见问题 中“CRUD 顶部有重叠遮挡”一节的描述需要同时满足两个条件CRUD 的固定表头处于开启状态。CRUD 属性表中affixHeader默认值为true作用于 table 模式且在使用autoFillHeight等高度自适应模式时也会默认开启固定表头页面上存在其他固定在顶部的元素。两者叠加后滚动页面时表头会顶到页面最顶部与其他固顶元素重叠遮挡。方案一设置--affix-offset-top偏移量推荐amis3.5.0及以上版本直接通过外层设置--affix-offset-top这个 CSS 变量即可。变量值设为页面顶部固顶元素的高度固定表头就会吸附在该元素下方而不是视口最顶部/* 设置在你页面渲染 amis 的外层容器上 */ #root { --affix-offset-top: 60px; /* 替换为你的顶部固顶元素的实际高度 */ }如果页面底部也有固顶元素造成遮挡快速入门 中提到的--affix-offset-bottom变量是同样的机制可按需一并设置。方案二通过affixOffsetTop参数设置3.5.0 之前3.5.0之前的版本没有上述 CSS 变量的说明需要在初始化 amis 渲染器时传入affixOffsetTop。以 SDK 接入方式为例amis.embed的第四个参数就是用来控制此类行为的let amis amisRequire(amis/embed); let amisJSON { type: page, body: { type: crud, api: /api/mock2/sample } }; let amisScoped amis.embed(#root, amisJSON, {}, { affixOffsetTop: 60 // 固顶偏移量替换为你的顶部固顶元素高度 });affixOffsetTop是number类型文档中的说明是固顶间距当页面有其他固顶元素时需要设置一定的偏移量否则会重叠。React 接入时该参数位于 快速入门 介绍的env配置项中用法相同。方案三不需要固定表头时直接关闭如果这个页面本来就不需要表头吸附最省事的做法是在 CRUD 的 schema 里加一项配置关闭该功能{ type: crud, api: /api/mock2/sample, affixHeader: false }CRUD 文档 中说明固定表头模式下可以affixHeader: false关闭属性表也确认affixHeader为boolean类型、默认值true。关闭后表头不再吸附滚动时随内容一起离开视口自然不会与顶部元素重叠但长表格滚动查看列名时就没有固定表头可用了取舍由页面需要决定。验证与限制验证方式在包含顶部固顶元素的页面上向下滚动使表头进入吸附状态。方案一、二成功后表头停在固顶元素正下方不再互相遮挡方案三成功后滚动时表头随内容滚出视口不再出现在顶部。方案一是3.5.0及以上版本的推荐做法affixOffsetTop参数面向更早的版本两者不要在同一个项目里混用升级时按版本选择其一。偏移量只解决“重叠遮挡”的定位问题不改变表头吸附本身的行为affixHeader只影响 table 模式下的表头其他固定头场景如底部工具栏的affixFooter默认false是独立配置项需要时另行设置。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考