微信小程序全局关了下拉刷新,但是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); } },
文章来源: https://blog.csdn.net/weixin_40820061/article/details/91890705