Ionic1学习——滚动到顶部固定、Tab+slide、可以收缩的卡片

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;
};