监听页面滚动,使某块内容区域opacity 由1慢慢变为0
data() {return {scrollDistance: 0, // 初始滚动距离为0opacity: 1, // 初始opacity为1};
},
onPageScroll(e) {// 获取滚动距离this.scrollDistance = e.scrollTop;// 根据滚动距离计算新的opacity值// 假设滚动100px时,opacity为0// 这里使用一个简单的线性计算函数this.opacity = Math.max(1 - (this.scrollDistance / 100), 0);
},
<template><view :style="`opacity: ${opacity}`">内容区域</view>
</template>