前言
这篇又是熟悉的某东APP的UI动画~~~
今天设计小姐姐需要实现的是我的页面顶部标题栏背景色，随着滚动颜色渐变。
大致效果：
页面标题栏默认只有两个图标
用户向上滚动页面时，标题栏始终固定在顶部，并逐渐出现白色的背景
用户向下滚动页面时，白色的背景逐渐消失
我第一反应本来是想拒绝的，但是我本身对这个功能实现也挺好奇。
于是，有了这篇文章的诞生。
正文开始
真机效果
技术栈
Uniapp + Taliwind CSS
因为之前有做过类似滚动的场景，所以上来就戳了一个下面的代码
H5端示例代码
<view
class="sticky top-0 z-200"
:style="`backgroundColor:${headerBoxBg}`">
自定义内容
</view>
data(){
return{
headerBoxBg: ''
}
},
onShow(){
document.addEventListener('scroll', this.handleScroll)
},
onHide() {
document.removeEventListener('scroll', this.handleScroll)
},
methods:{
handleScroll() {
const scrollTop =
window.pageYOffset || document.documentElement.scrollTop
const distanceThreshold = 30 // 滚动距离阈值，用于控制背景色变化的临界点
if (scrollTop < distanceThreshold) {
// 计算透明度
const opacity = scrollTop / distanceThreshold
this.headerBoxBg = `rgba(255, 255, 255, ${opacity})`
} else {
// 达到阈值后设置纯白背景
this.headerBoxBg = '#ffffff'
}
}
}
因为笔者都是在浏览器中进行版本开发，代码写完后，H5端测试正常。
然后，git提交代码，分支合并到test，代码发布到测试环境，动作一气呵成，一套流程可谓是行云流水啦。
然后...
测试给我提了个bug，app中页面滚动顶部标题栏没有白色渐变背景~~~
当时我就纳闷了，我第一反应是style没生效？ 于是我翻了下uniapp的style写法，难道必须是对象写法吗？
于是改成了下面这样
<view class="sticky top-0 z-200" :style="{ background: headerBoxBg }">
若干东西
</view>
不出意料，手机app端调试，标题栏依旧没有样式。
想了若干分钟，猜测可能是监听的部分出问题了，然后搜官方文档，搜到了下面两张图
实锤了，家人们，犯了个低级错误啊啊啊~~~
uniapp app端不支持 windows、 document, 这些是浏览器环境提供的对象，方便用户进行dom操作的。感兴趣的小伙伴可以去我这篇文章看看图解。
事已至此，上面H5代码示例中页面的滚动距离和页面滚动监听，写法是不对的，不能适用于APP端。咋办呢 这不是白忙了吗？然后我就找到了这个onPageScroll生命周期...
uniapp提供了监听页面滚动的生命周期钩子啊啊啊，让我在那搞半天...
适配H5端和APP端示例代码
示例代码如下，就这样简简单单的实现了设计小姐姐的需求，可以同时支持H5端和APP端
onPageScroll(e) {
console.log('滚动距离：', e.scrollTop)
this.handleScroll(e.scrollTop)
},
methods:{
handleScroll(scrollTop) {
const distanceThreshold = 20 // 滚动距离阈值，用于控制背景色变化的临界点
if (scrollTop < distanceThreshold) {
// 计算透明度
const opacity = scrollTop / distanceThreshold
this.headerBoxBg = `rgba(255, 255, 255, ${opacity})`
} else {
// 达到阈值后设置纯白背景
this.headerBoxBg = '#ffffff'
}
console.log(this.headerBoxBg)
},
}
总结
本文主要介绍了H5端的标题栏背景色随着滚动颜色渐变的UI动画。
Uniapp中适配H5端、APP端的上述UI动画。
细节一般是被忽略的，但是成长也是从抓住细节开始。
这篇文章的来源就是死扣细节，然后不断破案，学习总结出来的。
完结
这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。
欢迎转载，但请注明来源。
最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。
