作者:桃花岛的小米_992 | 来源:互联网 | 2023-07-27 13:30
由于项目需要一个功能,顶部距离小于50rpx时,导航栏透明显示;当滚动页面时,导航栏不再透明显示。
实现思路:
- 如果滑动位置距离顶部<=50的话,隐藏导航栏;
- 50 <距离顶部距离 <= 200, 透明度依次增加,直到opacity = 1
- 大于200的话,直接设置透明度opacity = 1
具体代码
案例中用到了uview这个ui框架的u-navbar
组件,具体可去官网查看这个组件的可配置API
v-show="isNavbar"
:background='backgroundObj'
:is-fixed='true'
:is-back='false'
:border-bottom='false'
/>
另外这里用到了onPageScroll
监听页面滚动的距离,他接收一个参数对象,我们才可以通过他获取页面距离做一些操作。