ionic 相簿功能的實現

2021-08-02 20:40:39 字數 3179 閱讀 8780

功能需求:

輪播圖顯示已新增的所有相片

實現拖動排序功能

實現長按彈出刪除按鈕

實現輪播圖與縮圖同步

效果圖展示:

使用的外掛程式:ngdraggable

**如下:

view-title="編輯">

align-title="center"

class="bar-dark">

class="buttons">

class="button button-icon ion-arrow-left-c button-clear"

ng-click="goback()">

button>

div>

class="title">編輯h1>

ion-header-bar>

class="has-header goods-album"

id = "album">

class="list album-slidebox" >

class="goods-image"

style="height:260px">

delegate-handle="goodsimageslider"

style="height:100%;width:100%"

on-slide-changed="slidechanged(index)"

active-slide="imageslectindex"

show-pager="true">

ng-repeat="item in photolist track by $index">

style="height:100%;width:100%"

class="vertical-container">

ng-src="}"

style="max-height:100%;max-width:100%">

div>

div>

ion-slide>

ion-slide-box>

div>

div>

class="album-tips">

長按可拖動排序

div>

class="select-container"

ng-drop="true"

ng-drop-success="dropcomplete($index,$data)" >

class="album-image"

ng-repeat="item in photolist"

ng-style=""

ng-drag="true"

ng-drag-data="item"

ng-click="selectphoto($index)"

on-hold="showdelete($index)">

ng-src="img/del.png"

class="image-delete"

ng-show="getshowscope($index)"

ng-click="">

ng-style="">

ng-src="

}" >

div>

div >

class="album-plus"

ng-style=""

ng-drag="false">

class="plus-div">

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

/*拖拽容器*/

.select-container

/*拖拽物件*/

.select-container

.album-image

.album-image

.image-delete

.album-image

div, .album-image

img/*plus按鈕*/

.select-container

.album-plus

/*加號容器*/

.plus-div

.plus-div

img

//初始化獲取photolist

$scope.photolist = [1,2,3,4,5,6,7,8,9];

$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.fnborder = function

(index)else

};$scope.getshowscope = function

(i);

//選擇事件

$scope.selectphoto = function

(index)

};//長按刪除事件

$scope.showdelete = function

(index)

};//滾動事件

$scope.slidechanged = function

(index)

};//拖拽

$scope.dropcomplete = function

(index, obj);

IOS相簿功能

html view plain copy scrollview uiscrollview alloc initwithframe cgrectmake 0,0,320,480 scrollview.delegate self scrollview.scrollenabled yes scrollvi...

ionic2 中的網路監測功能

參考 後須還將發表其他我正在ionic2使用的外掛程式或功能 增加網路監測功能的cordova外掛程式 ionic plugin add cordova plugin network information 開啟網路狀態動態檢測 開啟網路監測 startnetdetect stop disconne...

參考微信自定製相簿功能

需要選擇單張,可以直接呼叫imagepickerviewcontroller 但是往往我們需要同時上傳很多張 我們公司的系統要求是ios8.0以上都支援,所以就基於 assetslibrary自己做了乙個 先氣看 麻煩可以直接看我github上的demo,編碼辛苦,覺得有用還望給個star以作鼓勵 ...