小程序 - - - - - 实现渐隐渐显(监听滚动距离版)

avatar
作者
猴君
阅读量: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     });   } 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!