transparentBar（透明标题栏）

优质

小牛编辑

130浏览

2023-12-01

当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。

透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码

<header class="mui-bar mui-bar-nav mui-bar-transparent">
  <h1 class="mui-title">标题</h1>
</header>

如果需要个性化定制可通过data-*属性或者jsAPIDIY

DOM API	作用	JS API
data-top	距离顶部高度(`滚动到该位置即触发`)	`{top:0}`
data-offset	滚动透明距离	`{offset:150}`
data-duration	过渡时间 `ms`	`{duration:16}`
data-scrollby	监听区域滚动容器 (*mui 3.5版本+支持) 默认`window`默认监听原生滚动, 如监听mui scroll控件滚动,则: `document.querySelector('.mui-scroll-wrapper')`	`{scrollby:DOM}`

DOM API 使用示例:

<header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16' data-scrollby=".mui-scroll-wrapper">
  <h1 class="mui-title">标题</h1>
</header>

JS API 使用示例:

mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})

扩展阅读

问答社区参考示例：原生版本透明渐变导航条使用教程

代码块激活字符 mtransparent