1、滚动到顶部固定
原理是固定的内容先是隐藏的,监测<ion-content/>滚动,当滚动距离超过内容到顶部的距离时,将固定的内容显示出来。
html:
<div class="scroll-content has-header"><!--需要固定的内容-->
<ion-list id="showButton" ng-if="data.showButton">
<ion-item style="text-align: center" ng-if="saveFlag||editFlag">
<div style="color: #007aff;width: 50%;float: left" ng-click="addBaseItemDetail()">
<i class="ion-plus"></i> 新增
</div>
<div style="color: #007aff;width: 50%" ng-click="addHadBaseItem()">
<i class="ion-plus"></i> 已有项
</div>
</ion-item>
</ion-list>
<div ng-if="data.showTab">
<div class="item item-divider">明细列表</div>
</div>
</div>
<ion-content on-scroll="scrollingBef('showButton', 'add-content');scrollingBef('showTab', 'add-content', 'referenceScroll', 'showButton');"
delegate-handle="add-content" has-bouncing="true"><!-- 内容 -->
<ion-list id="referenceScroll">
<ion-item style="text-align: center" ng-if="saveFlag||editFlag">
<div style="color: #007aff;width: 50%;float: left" ng-click="addBaseItemDetail()">
<i class="ion-plus"></i> 新增
</div>
<div style="color: #007aff;width: 50%" ng-click="addHadBaseItem()">
<i class="ion-plus"></i> 已有项
</div>
</ion-item>
<ion-item class="item item-input" ng-click="openCBC()">
...
</ion-item>
.
.
.
<div ng-if="!saveFlag && !editFlag">
<ion-item class="item item-input">
<div class="input-label">变更日期:</div>
<div>{{customerData_BIC.date}}</div>
</ion-item>
.
.
.
</div>
</ion-list>
<div class="item item-divider">明细列表</div>
<div>
内容
</div>
</ion-content>
/**
* 在调用scrolling之前调用的操作
* @param showHeader
* @param handleName
* @param referenceId 参照物Id,当为null时,默认为0
* @param hadHeader 头部已存在的部分
*/
$scope.scrollingBef = function (showHeader, handleName, referenceId, hadHeader) {
/*offsetHeight是js对象所能支持的方法,而$("div:eq(1)")所获得的是一个JQUERY对象,他是不支持offsetHeight的。
get()方法返回了DOM元素,可以支持offsetHeight属性。*/
var referenceTarget = referenceId ? $("#" + referenceId).children(".list").get(0).offsetHeight : 0;
var headerObject = hadHeader ? $("#" + hadHeader).children(".list") : [];
var hadHeaderTarget = headerObject.length > 0 ? headerObject.get(0).offsetHeight : 0;
$scope.scrolling(showHeader, handleName, referenceTarget - hadHeaderTarget);
};
/**
* 滚动页面触发
* @param showHeader 需要控制的参数名(必须在data下面)
* @param handleName 需要控制的内容名
* @param reference 参照物的距离
*/
$scope.scrolling = function (showHeader, handleName, reference) {
if (handleName && showHeader) {
var scrollTarget = $ionicScrollDelegate.$getByHandle(handleName).getScrollPosition().top;
var referenceTarget = reference ? reference : 0;
// console.log(handleName + ":" + scrollTarget + "-" + referenceTarget);
$scope.data[showHeader] = scrollTarget > referenceTarget;
$scope.$apply();//Scope提供$apply方法传播Model的变化。
}
};
参考: https://www.jianshu.com/p/eb034a542ae3
2、Tab+slide
原理就是改掉ionic自带的tab,将它和slide结合起来。这个方案没有被接收,这里就只贴出代码。
<style type="text/css">
/* Tab+slide */
ion-scroll .tabs-top .tabs {
width: auto;
height: 2.4rem;
top: 0;
justify-content: flex-start;
border-bottom-width: 0;
}
ion-scroll .tabs-top .tabs .tab-item {
margin: 0.2rem 0.6rem 0 0.5rem;
line-height: 2.4rem;
font-size: 0.95rem;
overflow: unset;
}
</style>
<!-- Tab+slide -->
<ion-list>
<ion-scroll direction="x" scrollbar-x="false" style="height: 2.41rem;">
<div class="tabs-striped tabs-top tabs-color-positive tabs-background-light">
<div class="tabs">
<a class="tab-item" ng-class="selectIndex==$index ? 'active' : ''; "
ng-repeat="fixArea in fixAreaPartition" ng-click="activeSlide($index)">
{{fixArea.descr}}
</a>
</div>
</div>
</ion-scroll>
</ion-list>
<ion-slide-box on-slide-changed="slideChanged($index)" active-slide="selectIndex" does-continue="false"
show-pager="false" delegate-handle="add-slide">
<ion-slide style="-webkit-transition-delay:100ms;transition-delay: 100ms;" ng-repeat="fixArea in fixAreaPartition"><!-- 左右滑动延迟一秒,改善上下滑动体验 -->
<ion-list>
{{fixArea}}
</ion-list>
</ion-slide>
</ion-slide-box>
$scope.activeSlide = function (index) {//点击Tab时候触发
$scope.selectIndex = index;
$ionicSlideBoxDelegate.$getByHandle("add-slide").slide(index);
};
$scope.slideChanged = function (index) {//滑动Slide时候触发
$scope.selectIndex = index;
};
$ionicSlideBoxDelegate.$getByHandle("add-slide").update();//使用ng-repeat的时候,slide 一定要更新
参考:https://www.jb51.net/article/91378.htm ,https://blog.csdn.net/onil_chen/article/details/51191827
3、可以收缩的卡片
就是用了css和angularJS完成的
.card-list {
-webkit-transition: -webkit-all 0.5s cubic-bezier(.87,-.41,.19,1.44);
transition: all 0.5s cubic-bezier(.87,-.41,.19,1.44);
}
.card-list.close {
height: 0;
}
.list.card {
margin: 0.4rem 0.4rem;
}
<div class="list card" ng-repeat="xxx in xxxPartition">
<div class="item item-divider">
<h3 style="font-size: 0.95rem;float: left;width: 90%;">{{xxx.descr}}</h3>
<div style="float: right;width: 10%;text-align: center;" ng-click="closeCard(xxx)">
<i ng-if="!xxx.isClose" class="icon ion-arrow-down-b"></i>
<i ng-if="xxx.isClose" class="icon ion-arrow-left-b"></i>
</div>
</div>
<div class="card-list" ng-class="xxx.isClose?'close':''"><!--收缩|打开-->
<div class="item item-text-wrap" ng-repeat="item in xmlData"
ng-if="xxx.pk == item.xxx"
style="font-size: 0.875rem;overflow: auto;">
内容
</div>
</div>
</div>
$scope.closeCard = function (xxx) {//展开卡片动画
xxx.isClose = !xxx.isClose;
};