美文网首页
Weex scroll滑动改变顶部div位置

Weex scroll滑动改变顶部div位置

作者: fordG | 来源:发表于2019-06-19 10:36 被阅读0次
    • 滚动试图顶部, 有需要的固定内容, 往上滚动, 隐藏顶部div内容
    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>
    

    相关文章

      网友评论

          本文标题:Weex scroll滑动改变顶部div位置

          本文链接:https://www.haomeiwen.com/subject/ymdhqctx.html