uniapp滑动渐变导航栏实现思路

公司自己的项目案例

需求：

   导航栏初始为透明状态，字体为白色。在页面上滑到第一个元素触碰到导航栏的这个过程中，将导航栏渐变为白色背景，黑色字体

实现思路：

        首先原生的导航栏是肯定没办法满足需求的，只能使用自定义导航栏。我们想要使用自定义导航栏来实现这个需求则需要解决以下几个问题

1、如何获取页面的滑动距离？

2、如何获取页面第一个元素到导航栏的初始距离，并在滑动时实时获取？

3、应该用怎么样的一个公式来计算导航栏的透明度和字体颜色才能让导航栏渐变过程没那么突兀？

前两个问题比较好解决，uniapp有现成的api可以满足我们的需求

第一个问题

我们可以使用onPageScroll函数来获取页面的滑动距离，还可以用这个函数来监听用户滑动页面事件

官方文档链接

第二个问题

        这个问题我刚开始时也非常迷茫，因为uniapp中不能操作dom，而ref在小程序端只支持自定义组件使用。后来我翻了下uniapp的官方文档，发现了uni.createSelectorQuery()。

    这个函数返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 查询节点的位置布局信息

        

 

        这样一来我们的前两个问题就都可以解决了

        

         最后我们计算页面滑动距离占据“元素到自定义导航栏的距离”百分比就可以获得透明度和字体颜色了

        

mounted() {
	//需要在mounted生命周期后使用
	const query = uni.createSelectorQuery().in(this)
    // .nav-bar是自定义导航栏的类名 #formCard是页面第一个元素的id
	query.selectAll('#formCard, .nav-bar').boundingClientRect(res=>{
	     //获取元素到页面顶部的距离
        let cardPageTop = res[0].top
        //获取自定义导航栏高度
        let navHeight = res[1].height
        //然后获取元素到导航栏的距离
        this.cardTop = cardPageTop - navHeight        
	}.exec()
	//记得调用exec()	负责不执行		
},

//监听页面滑动事件和生命周期函数同级
onPageScroll(event){
    let scrollTop = event.scrollTop
    
    let color = Math.round(Math.round(scrollTop)/this.cardTop)*255)
    //计算最后取两位小数
    let alpha = Math.round(scrollTop)/this.cardTop.toFixed(2)

    //避免数字太大 给重新赋值 这一步忽略也没问题
    color= color>=255?255:color
    alpha = alpha>=1?1:alpha
    
    //最后使用模板字符串拼接好赋值给元素style就好了
    
    this.textColor = `rgb(${255-color},${255-color},${255-color})`
    this.backColor = `rgba(255,255,255,${alpha})`
}

       第一次写文，很多地方可能逻辑表达的不是很清楚，还请见谅！