Effect display on the homepage of a small program

<view class="pages">
	<view class="pagesTop">
		<image src="https://sucai.suoluomei.cn/sucai_zs/images/20200831095626-1598838867%281%29.png">
		</image>
	</view>
	<view class="pagesButon">
		<image mode="widthFix" src="https://sucai.suoluomei.cn/sucai_zs/images/20200831103837-1598838884%281%29.png">
		</image>
	</view>
</view>
<view class="diaonima" hidden="{
     
     {wode}}">
	哈哈哈我出来了
</view>

  data: {
    
    
    wode:true
  },
  onPageScroll(e){
    
    
    console.log(e.scrollTop)
    if(e.scrollTop > 350){
    
    
      this.setData({
    
    
        wode:false
      })
    }else{
    
    
      this.setData({
    
    
        wode:true
      })
    }
  },

.pages {
    
    
  width: 100%;
  position: relative;
}

.pagesTop {
    
    
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.pagesTop image {
    
    
  width: 100%;
  height: 1000rpx;
}
.diaonima{
    
    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  z-index: 50;
  background: #000;
  color: #fff;
  transition-duration: 0.5s;
}
.pagesButon {
    
    
  width: 100%;
  background: #000;
  color: #fff;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;
  height: 1000rpx;
  position: absolute;
  top: 1000rpx;
}
.pagesButon image{
    
    
  width: 100%;
}