阅读量:1
代码如下：
<!-- fixed-left --> <view class="fixed-box" animation="{{animationData}}"> 这里是渐隐渐显的标签 </view> .fixed-box { position: fixed; left: 0; top: 0; z-index: 999; background-color: #ccc; /* background-color: #f9f9f9; */ width: 100%; height: 90rpx; line-height: 90rpx; padding: 0rpx 30rpx; padding-top: 8rpx; box-sizing: border-box; display: flex; align-items: center; opacity: 0; } data:{ animationData: {}, fixedShow: false, }, /** * Monitor the scrolling distance and display animation * @param {*} event */ onPageScroll(event) { const scrollTop = event.scrollTop; if (scrollTop < 440 && this.data.fixedShow) { this.fadeOut(); } else if (scrollTop >= 440 && !this.data.fixedShow) { this.fadeIn(); } }, fadeIn: function () { const animation = this.animation; animation.opacity(1).step(); this.setData({ animationData: animation.export(), fixedShow: true }); }, fadeOut: function () { const animation = this.animation; animation.opacity(0).step(); this.setData({ animationData: animation.export(), fixedShow: false }); } 