• scroller 或list 滚动改变自定义div做的导航栏的颜色, 代码供参考

DfUKAJR0rZ.gif

• 代码

<template>
    <div style="background-color: white;">
        <scroller ref="scroller" class="scroller" :style="{top: -statusBarHeight}" @scroll="onScroll">
            <div style="height: 600; background-color: #1DA1F2"></div>
            <div style="height: 2000"><text>123</text></div>
        </scroller>
<!--        <div ref="nav" class="nav" :style="{ height: navBarHeight, paddingTop: statusBarHeight }">
            <div style="flex-direction: row; align-items: center; justify-content: center; height: 88;">
                <text style="color: #333333">详情</text>
            </div>
        </div> -->
        <div ref="top" class="top" :style="{ height: navBarHeight, paddingTop: statusBarHeight }">
            <div style="flex-direction: row">
                <div style="flex: 1; justify-content: center;">
                    <!-- 无法改变， 用image替换 -->
                    <wxc-icon ref="back" name="back" style="color: #ffffff; margin-left: 20;" :style="{color: backColor}"></wxc-icon>
                </div>
                <div style="flex-direction: row; align-items: center; justify-content: center; height: 88; flex: 8;">
                    <text ref="centerTitle" style="color: #ffffff">详情</text>
                </div>
                <div style="flex: 1;"></div>
            </div>
        </div>
        
    </div>
</template>

<script>
    
const Application = weex.requireModule('application')
import WxcIcon from 'weex-ui/packages/wxc-icon'

export default {
    data() {
        return {
            statusType: '1', //默认是白色导航栏
            backImage: '',
        };
    },
    components: {
        WxcIcon
    },
    computed: {
        statusBarHeight(){
            return WXEnvironment.statusBarHeight
        },
        navBarHeight() {
            return this.statusBarHeight + 88;
        },

        touchBarHeight() {
            return WXEnvironment.touchBarHeight ? WXEnvironment.touchBarHeight : 0;
        }
    },
    created() {},

    mounted() {
        setTimeout(() => {
            let boxRef = this.$refs.scroller.ref
            let top = this.$refs.top.ref
            let centerTitle = this.$refs.centerTitle.ref
            let back = this.$refs.back.ref
            this.$bindingx.bind({
                eventType: 'scroll', //描述事件触发类型是scroll触发
                anchor: boxRef, //滚动容器
                props: [
                    //props数组用来描述伴随scroll事件需要改变的元素节点
                    {
                        element: top, //动画元素
                        property: 'background-color', //动画属性
                        expression: "rgba(255,255,255, y/200)" //表达式 说明了y从0-400,对应的值是1-0
                    },
                    {
                        element: centerTitle, //动画元素
                        property: 'color', //动画属性
                        expression: "y<0? rgb(255,255,255):(y<200?rgb(255,255,255): rgb(55,70,150))"
                    },
                    {
                        element: back, //动画元素
                        property: 'color', //动画属性
                        expression: "y<0? rgb(255,255,255):(y<200?rgb(255,255,255): rgb(55,70,150))"
                    }
                ]
            });
        }, 100);
    },
    
    beforeDestroy() {
        console.log('beforeDestroy')
        Application.changeStatueBarStatus({status: '1'})
    }, 
    methods: {
        onScroll(e){
            console.log(e.contentOffset.y)
            if(e.contentOffset.y > -200){
                
                //状态栏变白色
                if(this.statusType == '0'){
                    this.statusType = '1'
                    this.backColor = 'rgb(55,70,150))'
                    Application.changeStatueBarStatus({status: this.statusType})
                }
            }else{
                //状态栏变黑色
                if(this.statusType == '1'){
                    this.statusType = '0'
                    this.backColor = '#ffffff'
                    Application.changeStatueBarStatus({status: this.statusType})
                }
            }
        }
    }
};
</script>

<style scoped>
.top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color:  rgba(255,255,255, 0);
}

/* .nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 1;
    background-color: rgba(255,255,255, 0);
} */

.scroller {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: white;
}
</style>