2024-4-12 页面标题栏适配背景色的交互优化

糖潮小漩风2024-04-15 9:50

1.提出的需求点

昨日UI同事提了个需求点，就是希望用户在下滑页面的时候可以让标题栏的背景颜色以及文字适配页面顶部的背景色。

这个需求咋听起来就像app背景色适配手机壳颜色一样离谱，然后本人在生产环境其他页面体验了一下这个交互，效果非常不错，强迫症的福音。那么我们先往下构思一下思路。

2.现状分析与解决思路

看到下图所示，页面头部是一片深紫色区域，下半部分是一片白色区域。当页面是吸顶的时候标题栏是深紫色，当页面划过标题栏的时候标题栏依然是深紫色。

图1: 红色区域这块是深紫色，这个是正常的

图2: 当我们向下滑动的时候这块区域依然是紫色，看起来就很不协调，请问读者们怎么看？

总之我们要解决这个问题，先找找思路。一个简单思路就是，用户向下拉动的时候监听一下滚动元素的scrllTop,随着下拉页面scrollTop逐渐增大，标题栏背景的透明度逐渐降低。scrollTop超过头部紫色背景部分时标题栏变成全白背景。

3. 代码的简单实现

js 复制代码

    
    componentDidtMount(): void {
        //确保Dom渲染后再加上监听事件
        setTimeout(()=>{
            const pageDom=document.getElementById("page");
            this.listener=pageDom.addEventListener('scroll',this.updataTitleBg)
        })
    }
    
    //确保事件销毁后，监听事件也需要销毁
    componentWillUmmount(): void {
        clearInterval(this.listener);
    }
    
    private updataTitleBg():void=>{
        const headDom = document.getElementById("header");
        const pageDom = document.getElementById("page");
        if(pageDom.scrollTop<headDom.scrollHeight){
            //这里除去100是为了round取整用，取整后还需要除以100
            const opacityVal = Math.round((headDom.scrollHeight-pageDom.scrollTop)*100/headDom.scrollHeight)/100
            //修改顶部标题栏API
            setTitleBackgroundColor(`rgba(0,0,0,${opacityVal})`)
        }
    }
    
    render():React.ReactNode=>{
        <View id='page'>
            <View id='header'>{this.renderHeaderPart()}</View>
            <View>{this.renderBodyPart()}</View>
        </View>
    }

代码实现后的效果就如下图所示：