本资源来自韩剧源码网，本站不提供下载，但是您可以在本站搜索同名资源，如果找不到请联系站长。

头部图片
1.首先在以及有上文基础制作适配不同分辨率标题栏的基础上，我们写一个顶部图片

<!-- 图片顶部 -->
<view class="topImg-w" >
        <image class="fengrui-img" src="../../static/1.png"></image>
</view> 
<!-- 顶部按钮 -->
<view class="topImg-btn-bg" :style="{top:titleHeight.statusBarHeight + 8 + 'px'}" @tap="tarBlack()">
        <image class="fengrui-top" src="../../static/tarblack.png" mode=""></image>
</view>

注意：为什么顶部按钮要绑定一个这样的top样式呢？

:style="{top:titleHeight.statusBarHeight + 8 + 'px'}"

因为我们通过前面的文章，知道了不同的手机状态栏的高度是不同的，所以我们需要动态绑定一个，那为什么需要后面在写一个加8px呢？这是因为我们top这是状态栏高度，我们标题栏是88upx，所以我们写的返回按钮需要在标题栏上垂直居中css样式

.fengrui-top{
        height: 48upx;
        width: 48upx;
}
.topImg-btn-bg{
        background-color: #e6e6e6;
        border-radius: 100upx;
        position: fixed;
        width: 90upx;
        height: 60upx;
        left: 30upx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 4;
                 
}
.topImg-w{
        height: 400upx;
        position: relative;
        z-index: 2;
}

监听滑动
随后我们需要监听她的滑动使用onPageScroll，传入一个参数且打印出来，随后我们在微信开发工具上滑动控制台就会打印

onPageScroll(e) {
        console.log(e)
},

根据获取的参数值，我们写一个v-if判断，如果我们就显示一个标题栏，小于我们就隐藏

onPageScroll(e) {
        console.log(e)
        var that = this;
        if(e.scrollTop > 60 ){
                that.showTiele = true;
        }else{
                that.showTiele = false;
        }
},

滑动之后出现标题栏

此内容 评论 本文后刷新可见！开通免审核权限 uni-app