@kalkulus wrote:
I'm trying to use ion-scroll directive to make a swipeable list of search results
on iOS or even in Chrome developer tools set to iOS emulation it all works
in Android, both device and Chrome emulation, it doesn'ta couple of things are not working on Android
- on-scroll event never gets fired
- in the $scope.swipe method the $ionicScrollDelegate.$getByHandle('members-scroll').scrollBy(xOffset, 0, true); line does nothingthere are no errors in the console, it just doesn't work
here's the code I'm working with
// HTML <ion-content id="search-profile-previews" has-bouncing="false" scroll="false"> <ion-scroll ng-if="MyCtrl.showContent" zooming="true" direction="x" ng-style="{width: getScrollWidth(), height: getHeight()}" delegate-handle="members-scroll" on-swipe-left="swipe('left')" on-swipe-right="swipe('right')" on-scroll="onScroll()"> <div ng-style="{width: getFullWidth(), height: getHeight()}" class="slidesContainer"> <div collection-repeat="member in MyCtrl.results" ng-click="showProfile(member.ID)" ng-style="{width: getItemWidth(),height: getItemHeight()}"> <div class="member" ng-style="{width: getItemWidth(),height: getItemHeight()}"> <div class="member-card"> <div class="member-info"> <div class="member-name">{{ member.displayTitle }}</div> <div class="member-function">{{ member.function }}</div> </div> </div> </div> </div> </div> </div> </ion-scroll> </ion-content> // JS code angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope, $timeout, $ionicScrollDelegate) { $scope.MyCtrl = { results: [{ ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }, { ID: 1, displayTitle: 'blabla', function: 'hehe' }], showContent: false }; var scrollDelegate = null; $timeout(function() { $scope.MyCtrl.showContent = true; scrollDelegate = $ionicScrollDelegate.$getByHandle('members-scroll'); }, 100); var pixelsOffset = 40; $scope.getScrollWidth = function() { return (window.innerWidth - pixelsOffset) + 'px'; }; $scope.getItemWidth = function() { return (window.innerWidth - pixelsOffset) + 'px'; }; $scope.getFullWidth = function() { var width = parseInt(window.innerWidth * $scope.MyCtrl.results.length + pixelsOffset); return width + 'px'; }; $scope.getHeight = function() { return (parseInt(document.getElementById('search-profile-previews').clientHeight) - 40) + 'px'; }; $scope.getItemHeight = function() { return (parseInt(document.getElementById('search-profile-previews').clientHeight) - 40) + 'px'; }; $scope.onScroll = function() { console.log('onScroll'); scrollDelegate.freezeScroll('true'); }; $scope.swipe = function(direction) { console.log(direction); var directionModifier = 1; if (direction == 'right') { directionModifier = -1; } var xOffset = (window.innerWidth - pixelsOffset) * directionModifier; console.log(xOffset); $timeout(function() { $ionicScrollDelegate.$getByHandle('members-scroll').scrollBy(xOffset, 0, true); }); }; });
it works on CodePen, not sure how to emulate Android there. I tried adding the Android classes to the but that didn't work
here's my system info
Your system information:Cordova CLI: 6.1.1
Gulp version: CLI version 1.2.1
Gulp local: Local version 3.9.1
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 15.04
Node Version: v4.4.2
Posts: 1
Participants: 1