首页 » Uni-app » uni-app框架新手写微信小程序透明渐变标题栏教程

没有正确的三观,没有成熟的性格,没有独立的经济条件,做点事情都是说爱你的人!这不叫爱,这叫耽误

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

唠叨一会

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

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

头部图片

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'}"

因为我们通过《新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x》以及知道了不同的手机状态栏的高度是不同的,所以我们需要动态绑定一个,那为什么需要后面在写一个加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;
}

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

监听滑动

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

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

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

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

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

视频预览

屏幕录制uni-app框架新手写微信小程序透明渐变标题栏教程

源码下载

链接: https://pan.baidu.com/s/1iGYZuRAJ-9YCpyYZNrwJbg

提取码: n64n

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《uni-app框架新手写微信小程序透明渐变标题栏教程》 发布于2020-07-13

赞(0) 生成海报

评论 6

1 + 6 =
  1. #0

    刚好需要谢谢

    Fr2个月前 (08-18)
  2. 微信 qaz449275996

    管理员枫瑞博客3个月前 (07-27)
  3. 以联系您咯

    管理员枫瑞博客3个月前 (07-27)
  4. #0

    付费请帮我搭建一个同样的小程序,给个联系方式吧

    什么都不能说3个月前 (07-23)
  5. #0

    平台作者在吗,怎么联系你

    什么都不能说3个月前 (07-23)
  6. #0

    学习了

    momo3个月前 (07-18)

长按图片转发给朋友

微信 QQ双端发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....