@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't![]()
a 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