Ionic implémente le glissement des clics du carnet d'adresses d'imitation et l'utilisation de $ionicscrolldelegate Analysis_jquery

Introduction

Dans le Noah Wealth Project, le carnet d'adresses est utilisé s'il ne s'agit que d'une simple vue, je pense personnellement que cela peut être trop monotone, donc sur la base de la visualisation, le clic et le glissement. L'effet est ajouté. Il y a deux objectifs : 1. Une bonne expérience. 2. Le carnet d'adresses contient une grande quantité de données. Lorsque nous cliquons sur un module et le faisons glisser vers le haut, la plage visible devient également plus grande.

Effet

Cliquez sur un module et la page commencera à glisser vers le haut jusqu'à ce que le module soit en haut de la page.
C'est l'endroit avant de cliquer. On clique sur le centre d'opération :

Après avoir cliqué, il y aura une animation coulissante pour faire glisser ce module vers le haut :

Implémentation

Obtenir des éléments et générer dynamiquement des identifiants
Lorsque nous cliquons sur un élément, nous devons faire savoir au programme où nous avons cliqué, ce qui est spécifique à un p, pas à notre endroit de clic de doigt.
Comme introduit dans le wiki précédent, le format de données renvoyé par l'interface est un tableau unidimensionnel lors de la conversion en un tableau multidimensionnel, les données doivent être parcourues une fois. À ce stade, nous pouvons ajouter des identifiants. chaque élément de données :

Liez l'identifiant comme ceci sur la page d'accueil

<p><br/></p>

scrolltop dans Jquery

Généralement, tout le monde pensera à cette méthode d'utilisation de jquery,

La méthode d'utilisation est :

$(selector).scrollTop(offset)

Cela peut réaliser un glissement, mais pendant l'utilisation, j'ai constaté que : lorsque vous cliquez sur le même module, la distance de clic et de glissement est différente selon les positions de glissement, et le le contenu glissé vers la couche supérieure ne peut pas être repoussé. Ceci est incompatible avec nos besoins.
Nous avons également recherché d'autres plug-ins, mais aucun d'entre eux ne peut obtenir l'effet souhaité. Un cadre ionique aussi puissant nous fournira-t-il une telle méthode ?

$ionicScrollDelegate

Délègue le contrôle de la vue de défilement (créée via les directives ion-centent et ion-scroll).
Cette méthode est directement déclenchée par le service $ionicScrollDelegate pour contrôler toutes les vues de défilement. Utilisez la méthode $getByHandle pour contrôler une vue de défilement spécifique.

Ceci contient plus de méthodes, parmi lesquelles la méthode resize() sera souvent utilisée dans ng-if. De plus,

il fournit une méthode pour obtenir la hauteur de défilement actuelle de l'écran, getPositionScroll() :

getScrollPosition()

• Retour : La position où l'objet défile jusqu'à cette vue, avec les propriétés suivantes :
o {value} left La distance depuis la gauche au défilement de l'utilisateur (commence à 0).
o {Number} top La distance entre le haut et l'endroit où l'utilisateur a fait défiler (commence à 0).

Ici, nous n'avons besoin d'utiliser que la hauteur verticale, utilisez donc $ionicScrollDelegate.getPositionScroll().top pour obtenir la hauteur de défilement actuelle.

ScrollTo et scrollBy

Ces deux méthodes sont similaires à la relation entre le chemin absolu (scrollTo) et la position relative (scrollBy).

Nous obtenons la position du module actuellement cliqué en utilisant la méthode suivante :

document.getElementById(x.id).offsetTop

Ce que nous obtenons ici est la position de ce p du haut, mais notre exigence à chaque fois est que nous voulons que le module sur lequel nous cliquons glisse vers le haut de l'écran, pas vers le haut de tout le contenu, il est donc préférable pour nous d'utiliser scrollBy ici.

Dans ce cas, il vous suffit de déplacer à chaque fois la distance du haut de l'écran vers le module cliqué. La méthode est la suivante :

var scroll = document.getElementById(x.id). ).offsetTop - $ionicScrollDelegate. getScrollPosition().top;

Appelez ensuite la propre méthode scrollBy d'ionic dans la méthode click :

$ionicScrollDelegate.resize();
$ionicScrollDelegate.scrollBy (0,scroll ,true);

Jusqu'à présent, cette fonction a été implémentée, j'espère qu'elle sera utile à tout le monde.

C'est la fin de cet article. Ionic a implémenté le glissement des clics du carnet d'adresses d'imitation et l'analyse de l'utilisation de $ionicscrolldelegate. J'espère que cela sera utile à tout le monde.