ionic 相册功能的实现

最新推荐文章于 2020-09-25 16:24:34 发布

原创最新推荐文章于 2020-09-25 16:24:34 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #angularjs

ionic 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在ionic应用中实现相册功能，包括轮播显示所有图片、拖动排序、长按删除以及轮播图与缩略图的同步操作。通过引入ngDraggable插件来实现图片的拖动排序功能。

功能需求：

轮播图显示已添加的所有相片
实现拖动排序功能
实现长按弹出删除按钮
实现轮播图与缩略图同步
效果图展示：

使用的插件：ngDraggable
代码如下：

<ion-view view-title="图片编辑">
    <ion-header-bar align-title="center" class="bar-dark">
        <div class="buttons">
            <button class="button button-icon ion-arrow-left-c button-clear"
                    ng-click="goBack()"></button>
        </div>
        <h1 class="title">图片编辑</h1>
    </ion-header-bar>
    <ion-content  class="has-header goods-album" id = "album">
        <div class="list album-slideBox" >
            <div class="goods-image" style="height:260px">
                <ion-slide-box
                        delegate-handle="goodsImageSlider"
                        style="height:100%;width:100%"
                        on-slide-changed="slideChanged(index)"
                        active-slide="imageSlectIndex"
                        show-pager="true">
                    <ion-slide ng-repeat="item in photoList track by $index">
                        <div style="height:100%;width:100%" class="vertical-container">
                            <div>
                                <img ng-src="{{hostUrl + item  + '?' + random }}" style="max-height:100%;max-width:100%">
                            </div>
                        </div>
                    </ion-slide>
                </ion-slide-box>
            </div>
        </div>
        <div class="album-tips">
            长按图片可拖动排序
        </div>
        <div class="select-container" ng-drop="true" ng-drop-success="dropComplete($index,$data)" >
            <div class="album-image" ng-repeat="item in photoList" ng-style="{height:cw/4 + 'px',width:cw/4 + 'px'}" ng-drag="true" ng-drag-data="item" ng-click="selectPhoto($index)" on-hold="showDelete($index)">
                <img ng-src="img/del.png" class="image-delete" ng-show="getShowScope($index)" ng-click="">
                <div ng-style="{border:fnBorder($index)}">
                    <img ng-src="{{hostUrl + item + '?' + random }}" >
                </div>
            </div >
            <div class="album-plus" ng-style="{height:cw/4 - 10 + 'px',width:cw/4 - 10 + 'px'}" ng-drag="false">
                <div class="plus-div">
                    <img ng-src="img/plus.png">
                </div>
            </div >
        </div>
    </ion-content>
</ion-view>

/*以下是goods-album的css*/
/*相册*/
.goods-album{

}
/*轮播图*/
.goods-album .album-slideBox{

}
/*图片*/
.goods-album .album-slideBox .goods-image{

}
/*小贴士*/
.goods-album .album-tips{
    color: #d7d7d7;
}
/*拖拽容器*/
.select-container{
    position:relative;
    overflow:auto;
}
/*拖拽对象*/
.select-container .album-image{
    padding:5px;
    float:left;
    position:relative;
}
.album-image .image-delete{
    position:absolute;
    height: 20px ;
    width: 20px ;
    margin: 5px;
    right: 5px;
    top: 5px;
}
 .album-image div, .album-image img{
    height: 100%;
    width: 100%;
}
/*plus按钮*/
.select-container .album-plus{
    float:left;
    margin:5px;
    background-color: #d7d7d7;
    position:relative;
    text-align: center;
}
/*加号容器*/
.plus-div{
    overflow: auto;
    margin:auto;
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    width:30px
}
.plus-div img{
    height: 100%;
    width: 100%;
}

 //初始化获取photoList
    $scope.photoList = [1,2,3,4,5,6,7,8,9];
    $scope.hostUrl = ConstValue.appHost;
    $scope.random = Variable.getRandom;
    //初始化相片选择按钮
    $scope.cw = document.getElementById("album").clientWidth;
    $scope.imageSelected = 0 ;
    //初始化X按钮，false
    for(var i = 0 ; i < $scope.photoList.length - 1 ; i ++){
        $scope['imageDeleteShow' + i ] = false;
    }
    $scope.fnBorder = function(index){

        if($scope.imageSelected == index){
            return "1px solid red"
        }else{
            return "0"
        }

    };

    $scope.getShowScope = function(i){
      return $scope['imageDeleteShow' + i];
    };
    //选择图片事件
    $scope.selectPhoto = function(index){
        $scope.imageSelected = index;
        $scope.imageSlectIndex = index;
        for(var i = 0 ; i < $scope.photoList.length - 1 ; i ++){
            $scope.fnBorder(i);
        }
    };
    //长按删除事件
    $scope.showDelete = function(index){
        $scope['imageDeleteShow' + index ] = !$scope['imageDeleteShow' + index ];
        // if(!$scope.$$phase){
        //     $scope.$digest;
        // }
    };

    //滚动图片事件
    $scope.slideChanged = function(index){
        $scope.imageSelected = index;
        for(var i = 0 ; i < $scope.photoList.length - 1 ; i ++){
            $scope.fnBorder(i);
        }
    };
    //拖拽图片
    $scope.dropComplete = function(index, obj){

        //重新排序
        var idx = $scope.photoList.indexOf(obj);
        $scope.photoList.splice(idx,1);
        $scope.photoList.splice(index,0,obj);

        //更新slide-box
        $ionicSlideBoxDelegate.update();

    };