要达到的效果:
在向上滑动屏幕时渐变显示原本隐藏的标题栏,向下滑动到某个位置时隐藏标题栏。
处理方法:
1、本想用指令来实现,以方便以后的重用,但是碰到几个坑。
2、指令行不通以后,才实现第二种,也是本文介绍的内容。
第一步:
$scope.show=false;//控制标题栏是否显示
$scope.transrate=0;//控制标题栏透明度
$scope.getScrollPosition = function(){
var position=$ionicScrollDelegate.getScrollPosition().top;//取滑动TOP值
if (position<=40)//小于等于40像素时隐藏标题
{
$scope.transrate=0;
$scope.show=false;
}else if (position<=200){//大于40、小于200时显示标题栏,并设置透明度
$scope.transrate=position/200;
$scope.show=true;
}else{
$scope.transrate=1;
$scope.show=true;
}
$scope.$apply();
}
第二步:
修改HTML
<ion-view view-title="云商城" hide-nav-bar="true">
<ion-header-bar align-title="center" class="bar-assertive" ng-if="show==true" style=" opacity: {{transrate}}">
<a class="button button-clear" ng-click="gochat()"><i class="icon ion-ios-chatbubble-outline headericon" > </i></a>
<h1 class="title">云商城</h1>
<a class="button button-clear" ng-click="GoSearch()" style="width: 50px;"><i class="icon icon-uniE65C headericon" > </i></a>
</ion-header-bar>
<ion-content class="mybody" no-tap-scroll="true" on-scroll="getScrollPosition()">
<span style="white-space:pre"> </span>//略
<pre name="code" class="html"> </ion-content>