The picture on the top bar of the WeChat applet is displayed and hidden with the scrolling of the page

The picture on the top bar of the WeChat applet is displayed and hidden with the scrolling of the page

The banner at the top of the applet displays pictures. As the page scrolls, it starts to gradually change the title mark and the solid color ceiling style. It
mainly uses scroll-viewthe components in the applet to pass 滚动时触发 bindscrolland 滚动到顶部 bindscrolltoupperchange the style effect of the top bar

 The effect is as shown in the figure:

1678849095000

 Applied technology: Mainly use the components
in the applet to pass and change the style effect of the top bar. If you don't use it , sometimes you can't reach the top when you slide to the top quickly.scroll-view滚动时触发 bindscroll滚动到顶部 bindscrolltoupperbindscrolltoupper

 

code show as below:

index.wxml

<view class="page">
<!--头部导航-->
<view class="page-hd">
  <view class="hd-background"
        style="opacity: {
   
   {opacity == 0 ? 1 : opacity}};background: {
   
   {opacity == 0 ? '#fff' : ''}}">
  </view>
  <view class="hd-text"
        style="opacity: {
   
   {1-opacity}};top: {
   
   {statusNavHeight}}px;height: {
   
   {nMenuButtonHeight}}px;line-height: {
   
   {nMenuButtonHeight}}px;">
    高会答案早知晓
  </view>
</view>
<!--界面主体-->
<view class="page-bd">
  <scroll-view scroll-y style="height: 90vh;" bindscroll="fnScrollEvent" bindscrolltoupper="fnScrollToupper">
    <view class="me-container">
      <view class="me-hd">
        <view class="box-cont">
          <view class="box-white-cont">
            <view class="box-title">讲解介绍</view>
          </view>
        </view>
      </view>
      <view class="me-bd">
      </view>
    </view>
  </scroll-view>
</view>
</view>

index.js

Page({
  data: {
    statusNavHeight: 20,
    nMenuButtonHeight: 40,
    opacity: 1,
  },
  onLoad() {
    // 获取状态栏和胶囊位置
    const {top, height} = wx.getMenuButtonBoundingClientRect()
    this.setData({
      statusNavHeight: top,
      nMenuButtonHeight: height
    })
  },
  // 滚动时触发
  fnScrollEvent(e) {
    let scrolltop = e.detail.scrollTop;
    if (scrolltop > 150) {
      this.setData({
        opacity: 0
      })
      return;
    }
    this.setData({
      opacity: (150 - scrolltop) / 150
    })
  },
  // 滚动到顶部
  fnScrollToupper() {
    this.setData({
      opacity: 1
    })
  },
})

index.wxss

.page{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
  /* 界面头部 */
.page-hd{
  height: 10vh;
  width: 100%;
}
.hd-background{
  width: 100%;
  height: 100%;
  background: url(https://636c-cloud1-5gfii8jlc56b5045-1306536140.tcb.qcloud.la/wxfile/background.png?sign=6a62c2c13c024f0091a1f8034f4d6155&t=1627552695) ;
  background-repeat: no-repeat;
  background-size: 100vw;
}
.hd-text{
  position: fixed;
  width: 100%;
  text-align: center;
  top: 20px;
  font-size: 28rpx;
  color: #333;
}
.page-bd{
  flex:1;
}
.me-container{
  height: 100%;
  width: 100%;
}
.me-hd{
  width: 100vw;
  height: 40vh;
  background-image: url(https://636c-cloud1-5gfii8jlc56b5045-1306536140.tcb.qcloud.la/wxfile/background.png?sign=6a62c2c13c024f0091a1f8034f4d6155&t=1627552695);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 -10vh;
}
.me-bd{
  height: 100vh;
}
.main-image{
  width: 100%;
  height: 100%;
}
.box-cont{
  padding-top: 200rpx;
  height: 100%;
  box-sizing: border-box;
}
.box-white-cont{
  height: 100%;
  background-color: #fff;
  border-radius: 40rpx 40rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box-title{
  margin-top: 20rpx;
  font-size: 28rpx;
}

index.json

{
  "usingComponents": {},
  "navigationStyle": "custom",
  "navigationBarTextStyle": "black"
}