【转】uni-app框架新手写微信小程序透明渐变标题栏

fengrui99 发表于 2020-7-14 09:21

本帖最后由 fengrui99 于 2020-7-14 09:29 编辑

原文来自：https://www.frbkw.com/2912/

在看该文章的时候大家需要提前阅读《新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x》
因为文章的实例也是通过上文的基础新增的。我什么需要一个透明的标题栏呢？因为部分ui可能和下图一样，所以切图仔会比较难受

头部图片
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;
   }
},
滑动之后出现标题栏

源码下载
链接: https://pan.baidu.com/s/1iGYZuRAJ-9YCpyYZNrwJbg提取码: n64n

Bruce_HD 发表于 2020-7-14 10:00

可以，多学习学习一点。

china08 发表于 2020-7-14 10:17

谢谢分享

leozhang81 发表于 2020-7-14 11:01

{:1_893:}谢谢谢谢

fengrui99 发表于 2020-7-14 11:40

yuehanoo 发表于 2020-7-14 09:45
谢谢分享，支持支持。

哈哈谢谢谢啦{:17_1068:}

页: [1]

吾爱破解 - 52pojie.cn's Archiver

【转】uni-app框架新手写微信小程序透明渐变标题栏