【ionic+angularjs】$ionicScrollDelegate list列表行记录定位的两种方式

前端之家收集整理的这篇文章主要介绍了【ionic+angularjs】$ionicScrollDelegate list列表行记录定位的两种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么要定位?
在访问带有列表的页面,一般会点击列表中某行记录,访问其详情页面,点击返回后回到列表页面,若不进行定位,那么用户需要重新滚动直到找到刚才点击的行记录,体验不好。那么返回时定位可以将刚才点击的行记录直接展示在当前的可视区域内。 @H_301_5@

@H_301_5@
ionic中列表定位可以通过$ionicScrollDelegate来实现,定位方式: @H_301_5@
1、通过锚点定位 @H_301_5@
2、通过滚动高度定位 @H_301_5@
两种方式的实现都需要考虑列表是否渲染完成的问题,方式1通过元素id,方式2通过滚动高度,因此列表未渲染完成会导致定位的元素id不存在或者滚动的高度不够的问题而使定位失效。那么监听列表渲染是否完成可以通过自定以指令来做,如下: @H_301_5@
app.directive('onWatchRepeatFinished',function ($timeout) { @H_301_5@
return { @H_301_5@
restrict: 'A',@H_301_5@
link: function(scope,element,attr) { @H_301_5@
if (scope.$last === true) { @H_301_5@
var key=attr.onWatchRepeatFinished; @H_301_5@
if(key!=null) { @H_301_5@
key=key.replace(/(^\s*)|(\s*$)/g,""); @H_301_5@
if(key==="") { @H_301_5@
key="ngRepeatFinished"; @H_301_5@
} @H_301_5@
} else { @H_301_5@
key="ngRepeatFinished"; @H_301_5@
} @H_301_5@
$timeout(function() { @H_301_5@
scope.$emit(key); @H_301_5@
}); @H_301_5@
} @H_301_5@
} @H_301_5@
}; @H_301_5@
}); @H_301_5@ @H_301_5@
***********************定位方式1:通过锚点定位**************************
@H_301_5@
////////////////////页面///////////////////// @H_301_5@
<ion-content delegate-handle=" businessList -handle"> @H_301_5@
<div class="list"> @H_301_5@
<div class="item" @H_301_5@
ng-repeat="info in infos" @H_301_5@
ng-click="gotoInfoDetail($index)" @H_301_5@
id="info-anchor-{{$index}}" @H_301_5@
on-watch-repeat-finished="businessList"> @H_301_5@
{{info.date}} @H_301_5@
</div> @H_301_5@
</div> @H_301_5@ @H_301_5@
</ion-content> @H_301_5@ @H_301_5@
////////////////////controller/////////////////////
@H_301_5@
$scope. gotoInfoDetail =function(index) { @H_301_5@
$window.localStorage[' info -anchor']=' info-anchor- '+index; @H_301_5@
//跳转到详情
@H_301_5@
$scope.gotoView.gotoNewHospDetailPage(); @H_301_5@
} @H_301_5@ @H_301_5@
$scope.$on(' businessList ',function (e) { @H_301_5@
var anchorid=$window.localStorage[' info -anchor']; @H_301_5@
if(!$Element.isEmpty(anchorid)) { @H_301_5@
$location.hash(anchorid); @H_301_5@
$ionicScrollDelegate.$getByHandle(' businessList -handle ').anchorScroll(); @H_301_5@

@H_301_5@
$window.localStorage[' info - scroll ']=null;
@H_301_5@
} @H_301_5@
}); @H_301_5@ @H_301_5@
注:该方式会在url上添加锚点(#id),在微信公众号平台页面返回时需要点击2次才能返回到前一页面 @H_301_5@
***********************定位方式2:通过滚动高度定位**************************
@H_301_5@
////////////////////页面///////////////////// @H_301_5@
<ion-content delegate-handle=" businessList -handle"> @H_301_5@
<div class="list"> @H_301_5@
<div class="item" @H_301_5@
ng-repeat="info in infos" @H_301_5@
ng-click="gotoInfoDetail()" @H_301_5@
on-watch-repeat-finished="businessList"> @H_301_5@
{{info.date}} @H_301_5@
</div> @H_301_5@
</div> @H_301_5@ @H_301_5@
</ion-content> @H_301_5@ @H_301_5@
////////////////////controller///////////////////// @H_301_5@ @H_301_5@
$scope. gotoInfoDetail =function() { @H_301_5@
var handle=$ionicScrollDelegate.$getByHandle(' businessList -handle '); @H_301_5@
if(handle) { @H_301_5@
$window.localStorage[' info -scroll']= handle.getScrollPosition().top; @H_301_5@
} @H_301_5@
$window.localStorage[' info -scroll']=0 ; @H_301_5@
@H_301_5@
//跳转到详情
@H_301_5@
$scope.gotoView.gotoNewHospDetailPage(); @H_301_5@
} @H_301_5@ @H_301_5@
$scope.$on(' businessList ',function (e) { @H_301_5@
var scrolltop =$window.localStorage[' info - scroll ']; @H_301_5@
if(!$Element.isEmpty( scrolltop )) { @H_301_5@
$ionicScrollDelegate.$getByHandle(' businessList -handle ').scrollTo(0,parseInt( scrolltop )); @H_301_5@

@H_301_5@
$window.localStorage[' info - scroll ']=null;
@H_301_5@

猜你在找的Angularjs相关文章