微信小程序导航栏滑动透明度变化

Posted 2022-08-01 CodingForAndroid

json 中配置：

  "navigationStyle":"custom",
  "navigationBarTextStyle":"black"

wxml 中

<!-- 自定义状态栏 -->
<view class="custom-bar-background" style="opacity:navOpacity;padding-top:statusBarHeightpx">
</view>
<view class="custom" style="padding-top:statusBarHeightpx">
	<text>我的</text>
</view>

wxss中：

.custom-bar-background
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: rgba(255,255,255);
  z-index: 990;

.custom 
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;


.custom text 
  color: #222222;
  font-size: 34rpx;
  font-weight: 500;
  max-width: 280rpx;

js中：

  /**
   * 页面滚动
   * @param * ev 
   */
  onPageScroll: function (e) 
    if (e.scrollTop < 30 && this.data.navOpacity != 0.0) 
      this.setData(
        navOpacity: 0.0,
      );
     else if (e.scrollTop > 40 && this.data.navOpacity != 1) 
      this.setData(
        navOpacity: 1,
      );
    
  ,

点击链接加入群聊【编程之美】：https://jq.qq.com/?_wv=1027&k=h75BfFCg