Weex scroll滑动改变顶部div位置

2019-06-19  本文已影响0人  fordG
r1P5Dtta2u.gif
<template>
    <div style="background-color: white;">
        <scroller ref="scroller" class="scroller"  @scroll="onScroll">
            <div style="height: 600; background-color: #1DA1F2"></div>
            <div style="height: 2000; justify-content: flex-end;"><text>123</text></div>
        </scroller>
        <div ref="top" class="top"></div>
    </div>
</template>

<script>
    

export default {
    data() {
        return {
        };
    },
    components: {
        
    },
    computed: {
        screenHeight(){
            const { env } = weex.config;
            // const navHeight = Utils.env.isWeb() ? 0 : (Utils.env.isIPhoneX() ? 176 : 132);
            return env.deviceWidth /  750  * env.deviceHeight ;
        }
    },
    created() {
        console.log(this.screenHeight)
    },

    mounted() {
        
        weex.requireModule('dom').getComponentRect(this.$refs.scroller, e=>{
            console.log('getComponentRect', JSON.stringify(e), e.size.height)
            let height = e.size.height
            let boxRef = this.$refs.scroller.ref
            let top = this.$refs.top.ref
            this.$bindingx.bind({
                eventType: 'scroll', //描述事件触发类型是scroll触发
                anchor: boxRef, //滚动容器
                props: [
                    //props数组用来描述伴随scroll事件需要改变的元素节点
                    {
                        element: top, //动画元素
                        property: 'transform.translateY', //动画属性
                        expression: "y>0?(y<300? (0-y): -300): 0"
                    },
                    {
                        element: boxRef, //动画元素
                        property: 'transform.translateY', //动画属性
                        expression: "y>0?(y<300? (0-y): -300): 0"
                    },
                    {
                        element: boxRef, //动画元素
                        property: 'height', //动画属性
                        expression: `y>0?(y<300?(${height}+y): ${height+300}): ${height}`
                    }
                ]
            })
        })
    },
    
    methods: {
        onScroll(e){
            console.log(e.contentOffset.y)
        }
    },
};
</script>

<style scoped>
.top {
    position: absolute;
    top: 0;
    width: 750;
    height: 300;
    background-color:  red;
}
.scroller {
    position: absolute;
    top: 300;
    width: 750;
    bottom: 0;
    background-color: #CDDC39;
}
</style>
上一篇下一篇

猜你喜欢

热点阅读