沉浸式顶部导航栏
来源:互联网 发布:联通4g网络不好怎么办 编辑:程序博客网 时间:2024/03/28 22:37
原理:
1)要把原理view的默认header隐藏掉,<ion-view view-title="标题" hide-nav-bar='true'>
2)重新定义的<ion-header-bar>要放在</ion-content>之后,因为首先要编译ion-content指令,translucentBar指令才能从继承的父级作用域中获取ion-content的scope.$$childHead.$onScroll函数,所以<ion-header-bar>必须放在</ion-content>之后。
(1)html里
<ion-view view-title="首页" hide-nav-bar='true' ></ion-view>
(2)html里:
<ion-header-bar class="bar-assertive bar bar-header disable-user-behavior" align-title="center" no-tap-scroll='true' translucent-bar="mycontent" translucent-color-opacity="0.01" translucent-color="rgb(228,32,18)" translucent-scroll-maxtop="88"> <div class="buttons buttons-left"> <span class="left-buttons"> <img ng-click="openLeftContent()" ng-src="{{ userHeadImg }}" style="margin-left: 11px; border-radius: 50%; border:1px solid #fff;width: 35px;" icon-click-round-ripple icon-round-ripple-width="20" icon-round-ripple-color="red"/> </span> </div> <div class="title title-center header-item" style="left: 61px; right: 61px;"> <span class="nav-bar-title"> <div class="home_search"> <div class="item-input-wrapper homeAddSearchLabel"> <!--<i class="icon ion-android-search placeholder-icon"></i>--> <input type="text" class="storeGoodsSearchInput ng-pristine ng-untouched ng-valid" placeholder="搜索宝贝" ng-model="inputContent.goodsSearchData"> <button class="button button-clear" ng-click="homeGoodsSearch()"><i class="icon ion-android-search placeholder-icon"></i></button> </div> </div> </span> </div> <div class="buttons buttons-right"> <span class="right-buttons"> <img style="width: 32px;margin-right: 8px" src="img/homeScan.png" ng-click="scanPay()"> </span> </div></ion-header-bar>
(3)js里:
.directive('translucentBar', ['$ionicScrollDelegate',function($ionicScrollDelegate) { return { scope:false, restrict: 'A', replace: false, link: function(scope, element, attrs) { var el = angular.element(element); var ion = angular.element(element).parent().find('ion-content').css({ top:'0' }); var delegateHandle = attrs.translucentBar; var translucentColorOpacity = attrs.translucentColorOpacity; var translucentColor = attrs.translucentColor; var translucentScrollMaxtop = attrs.translucentScrollMaxtop; var translucentColorTotal = attrs.translucentColorTotal; if(!delegateHandle) { //throw new('please dingfine the ion-content of delegate-handle'); } if(!translucentColorOpacity) { //throw new('you must set translucentColorOpacity directive of the value'); } if(!translucentColor) { //throw new('you must set translucentColor directive of the value'); } if(!translucentScrollMaxtop) { translucentScrollMaxtop = 88; } if(!translucentColorTotal) { translucentColorTotal = 90; } var rgb = translucentColor.substring(4,translucentColor.length-1); var initCss = { 'background': "rgba("+rgb+","+translucentColorOpacity+")" }; el.css(initCss); var scroollTop = null; var distance = null; var opacity = null; var translucentCss = null; scope.$$childHead.$onScroll = function() { distance = $ionicScrollDelegate.$getByHandle(delegateHandle).getScrollPosition(); scroollTop = distance.top; if(scroollTop <= translucentScrollMaxtop) { opacity = scroollTop / translucentColorTotal; translucentCss = { 'background': "rgba("+rgb+","+opacity+")" }; el.css(translucentCss); } } } };}])
阅读全文
0 0
- 沉浸式顶部导航栏
- 沉浸式导航栏
- ionic-基于angularjs实现沉浸式顶部导航栏,滚动时产生渐变效果
- Android沉浸式状态栏、导航栏
- 【设置】沉浸式状态栏、导航栏
- android 沉浸式导航栏的使用
- 自定义titleBar沉浸式导航栏
- 沉浸式透明状态栏与导航栏
- mui 沉浸式导航
- ios顶部导航栏
- 固定顶部导航栏
- 自定义顶部导航栏
- PagerSlidingTabStrip顶部导航栏
- mui 设置沉浸式导航
- Android沉浸式状态栏顶部着色
- Android 4.4 沉浸式透明状态栏与导航栏
- Android 4.4 沉浸式透明状态栏与导航栏
- 自定义导航栏及实现沉浸式状态栏
- BZOJ 1552 浅谈SPLAY维护区间最值
- [python]使用python实现蜡烛图绘制
- Array Challenge 2017 多校10 矩阵快速幂
- md5加密
- 剑指Offer第七题(Java实现)
- 沉浸式顶部导航栏
- 星际争霸AI训练环境与自主规划决策问题初探
- Java多线程之Lock的使用--重入锁(ReentrantLock)、Condition、公平锁和非公平锁、ReentrantReadWriteLock的使用(读写锁)
- Spring Boot 学习笔记
- P1434 滑雪
- kaldi源码中run.sh脚本分析
- 认识Nginx
- cython的使用
- 安装swoole扩展