Weex scroll滑动改变顶部div位置
2019-06-19 本文已影响0人
fordG
- 滚动试图顶部, 有需要的固定内容, 往上滚动, 隐藏顶部div内容
- 代码
<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>