代码如下:
html
<!-- fixed-left -->
<view class="fixed-box" animation="{{animationData}}">
这里是渐隐渐显的标签
</view>
css
.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;
}
js
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
});
}