效果
思路
监听滚动事件,映射滚动距离至头图的放大比例。
实现
<!-- index.wxml -->
<scroll-view
scroll-y
class="scrollView"
type="list"
worklet:onscrollupdate="scrollViewOnScroll"
>
<image
src="https://wx2.sinaimg.cn/large/007GYgpfly1hnfihmysbmj32yp281u0y.jpg"
mode="aspectFill"
class="headerImage"
/>
</scroll-view>
/** index.ts */
const { shared } = wx.worklet
/** 头图的放大高度 */
const headerImageHeight = shared(0)
Component({
lifetimes: {
attached() {
this.applyAnimatedStyleToHeaderImage()
}
},
methods: {
/** 绑定由 worklet 驱动的样式到头图 */
applyAnimatedStyleToHeaderImage() {
this.applyAnimatedStyle(
'.headerImage',
() => {
'worklet'
const scale = (240 + headerImageHeight.value) / 240
return {transform: `scale(${Math.max(1, scale)})`}
},
{immediate: false}
)
},
/** <scroll-view/> 的滚动回调 */
scrollViewOnScroll(event: any) {
'worklet'
headerImageHeight.value -= event?.detail?.deltaY
}
}
})
/* index.wxss */
.scrollView {
width: 100vw;
height: 100vh;
}
.headerImage {
width: 100%;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}