UNI-APP 自定义头部 滚动页面渐显标题

首先我们的page中"navigationStyle": "custom"

"navigationStyle": "custom"

代码实现

<view class="vitenav" :style="'background-color: rgba(255, 255, 255,' + top +')'">
<!-- #ifdef MP-WEIXIN -->
		  	<view class="status-bar" :style="'height:' + statusBarHeight + 'px'"></view>
		  <!-- #endif -->
			<view class="title" :style="'color: rgba(255, 255, 255,' + op +')'">
				<view class="back" @click="goback">
					<u-icon name="arrow-left" :color="'rgba(255, 255, 255,' + op +')'" size="21"></u-icon>
				</view>
				  标题
			</view>
        </view>

        data() {
            return {
                statusBarHeight: 0,
                top: 0,
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    this.statusBarHeight = res.statusBarHeight
                }
            })
        },

 onPageScroll (res) {
  // res.scrollTop 为页面滚动距离
  let top = res.scrollTop
  // height为状态栏高度+自定义导航栏标题内容高度（这里是44px）
  let height = this.statusBarHeight + 44
  // 判断滚动高度
  // 如果小于顶部自定义导航的高度
  if (top <= height) {
    // 透明度(top) = 滚动距离/导航栏高度
    //  (不做操作 直接计算 this.top = top/height 也可以实现)
    // 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
    // 四舍五入后得到的只能是0/1
    // 因此做如下操作
    this.top = Math.round(top/height*100)/100
  } else {
    // 如果滚动距离大于导航高度，则透明度值为1（不透明）
    this.top = 1
  }
}




.vitenav {
	position: fixed;
	top: 0rpx;
	left: 0;
	right: 0;
	background: #fff;
    z-index: 99;
	.title {
		.back{
			position: absolute;
			left: 15rpx;
			/* #ifdef H5 */
			top: 30rpx;
			/* #endif */
			/* #ifndef H5 */
			top: 20rpx;
			/* #endif */
			width: 50rpx;
			height: 50rpx;
		}
		text-align: center;
		position: relative;
		left: 0;
		top: 0;
		padding: 20rpx 0;
		color: #FFFFFF;
		line-height: 60rpx;
	}
}