微信小程序全局关了下拉刷新,但是IOS还是可以下拉,于是产品就有新需求了,类似朋友圈那样的页面,下拉的时候背景图片要跟着放大显示铺满整个下拉背景,文笔不好,直接上关键代码↓
<view class="header">
<image src="{{bgImg}}" style="transform: scale({{scale}}) translateY({{translateY+'rpx'}});" mode="aspectFill" class="myBg" lazy-load="true"></image>
</view>
.header {
z-index: -1;
position: fixed;
top: 0;
right: 0;
left: 0;
.myBg {
width: 100%;
transform-origin: 50% 0;
background-color: #f3f3f3;
}
}
onPageScroll(e) {
var h = this.data.height;
var a;
var b;
wx.getSystemInfo({
success(res) {
a = 750 / res.windowWidth;
b = res.system.indexOf("Android");
}
});
if (e.scrollTop < 0) {
util.xhwSetData({
scale: 1 - e.scrollTop / (h / a) * 0.8,
translateY: 0
}, this);
} else if (e.scrollTop < h && b === -1) {
util.xhwSetData({
translateY: -e.scrollTop / 2
}, this);
}
},