Sample project to scroll through iOS camera-roll using ionic2
component virtual-scroll.
Notes:
- uses
<ion-img>
to lazyload image requests.ion-img[ width, height]
attrs are set correctly, but not updated inion-img img[ width, height]
- uses
ImageService.getLazySrc()
to copy image files fromassets-library://asset/
tocordova.file.cacheDirectory
for access byIMG[src]
- uses simple FIFO image cache/GC to limit the number of image files in cached in
cordova.file.cacheDirectory
- NOT tested with WKWebView. see possible issues:
- issues:
Dependencies:
Github Repo
git clone https://github.com/mixersoft/ionic2-camera-roll-virtual-scroll.git
cd ionic2-camera-roll-virtual-scroll
npm install
# run in browser
ionic serve
# run on iOS
ionic plugin add cordova-plugin-add-swift-support --save
ionic plugin add cordova-plugin-camera-roll-location --save
ionic plugin add cordova-plugin-file --save
ionic platform add ios
ionic build ios
ionic emulate ios
- there is a problem with production builds. set
"ionic:build": "ionic-app-scripts build --dev"
- webpack build is the default, but rollup build is available by renaming
"xxxionic_rollup": "./scripts/rollup.config.js"
This project was developed against ionic-angular@2.0.0-rc.3
. Follow these steps to rebuild the project against ionic-angular@latest
.
ionic -v
# npm install -g ionic
npm install ionic-angular@latest --save
npm install @ionic/app-scripts@latest --save-dev
ionic start ionic2-virtual-scroll tabs -v2
cd ionic2-virtual-scroll/
npm rebuild node-sass
ionic serve
ionic plugin add cordova-plugin-add-swift-support --save
ionic plugin add cordova-plugin-camera-roll-location --save
ionic plugin add cordova-plugin-file --save
ionic build ios
add modules from ionic2-camera-roll-location-demo
# "angular2-google-maps": "0.15.0", => "@angular/common": "2.1.1"
npm install angular2-google-maps@0.15.0 --save
npm install @types/googlemaps --save-dev
# ionic g page map
# additional dependencies
npm install lodash --save
npm isntall @types/lodash --save-dev
manual changes
- add
ionic2-camera-roll-location-demo/src/shared
folder - add code to page
MapPage
# ionic g page imageScroll