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

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

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

2020年7月14日 下午9:18
APP源码/E4A源码

 

头部图片
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

【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 最新uni-app框架新手写微信小程序透明渐变标题栏
嘿,投喂下嘛!