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

本文主要是介绍微信小程序导航栏滑动透明度变化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

json 中配置：

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

wxml 中

<!-- 自定义状态栏 -->
<view class="custom-bar-background" style="opacity:{{navOpacity}};padding-top:{{statusBarHeight}}px">
</view>
<view class="custom" style="padding-top:{{statusBarHeight}}px"><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

这篇关于微信小程序导航栏滑动透明度变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---