Préface
Dans la section précédente, il y avait un projet mobile qui devait utiliser un rafraîchissement et un traction de chargement plus d'effets. La première réflexion dans mon esprit a été l'effet de Weibo. Au début, j'ai eu quelques écarts dans ma compréhension. Je pensais que le tractionnaire était également une apprentissage des données, et Pulp-up était une apprentissage des données. Plus tard, j'ai demandé à mes collègues et j'ai découvert que le tir-down n'était qu'un actualisation des dernières données, et Pull-up était une donnée.
Conseils d'utilisation
1. Reportez-vous à Iscroll.js et ajoutez deux événements d'écoute lors de l'initialisation: TouchMove et DomContent Téléchargé.
2. Implémentez l'événement ONSCROLLEND du plug-in iscroll, c'est-à-dire dans cet événement, appelez votre propre méthode Ajax pour actualiser et ajouter les données.
3. Lorsque vous tirez vers le haut et chargeant plus de demandes en arrière-plan, il équivaut à des données de demande de pagination. À l'heure actuelle, le paramètre PageIndex doit être envoyé pendant la demande Ajax, et lors de l'initialisation du chargement, un PageCount doit être renvoyé de l'arrière-plan pour que le premier plan juge.
4. La chose la plus importante est d'implémenter la méthode de rafraîchissement de Pulldown (PullDown) et la méthode de chargement plus (PullupAction).
Diagramme d'effet de course
Méthode d'implémentation
var myscroll, pulldownel, tildownoffset, pullUpel, pullUpoffset, généréCount = 0; / ** * rafraîchissement pull-down (personnaliser cette méthode) * myscroll.refresh (); Une fois les données chargées, appelez la méthode de mise à jour de l'interface * / fonction PullDownAction () {setTimeout (function () {var el, li, i; el = document.getElementById ('thelist'); for (i = 0; i <3; i ++) {li = document.createetement ('li'); li.innertext = 'généré' '+ (++ généré); el.insfored =' généré '+ (++ généré); el.childNodes [0]);} myscroll.refresh (); } / ** * Faites défiler et tourner les pages (personnaliser cette méthode) * myscroll.refresh (); // Après le chargement des données, appelez la méthode de mise à jour de l'interface * / fonction PulLupAction () {setTimeOut (function () {// <- simuler la congestion du réseau, supprimer Settimeout de la production! Var el, li, i; el = document.getElementById ('thelist'); for (i = 0; i <3; i ++) {li = document.Createelement ('li'); li.inner = '. (++ généré); } / ** * Initialiser le contrôle iscroll * / fonction chargé () {pullDownel = document.getElementById ('pulldown'); PullDownOffSet = Pulldownel.offsetHeight; pullUpel = document.getElementById ('pullup'); Pullupoffset = pullUpel.offsetheight; myscroll = new isCroll ('Wrapper', {ScrollBarClass: 'MyScrollBar', Usetransition: False, TopOffset: PullDownOffSet, onRefresh: function () {if (pulldownel.classname.match ('chargement')) {pullDownel. Pulldown.QuerySelector ('. PullDownLabel'). InnerHtml = 'PullDown Refresh ...'; OnScrollMove: Function () {if (this.y> 5 &&! PulDownel.classname.match ('flip')) {PullDownel.classname = 'flip'; Pulldown.classname.match ('flip')) {Pulldown.classname = ''; ! Pulpel.classname.match ('flip')) {Pulpel.classname = 'flip'; pullUpel.classname.match ('flip')) {pullUpel.classname = ''; Pulldown.classname = 'Chargement'; Pulpel.QuerySelector ('. PullUpLabel'). InnerHtml = 'Chargement ...'; setTimeout (function () {document.getElementById ('wrapper'). style.left = '0';}, 800);} // initialiser le document de contrôle iscroll de liant.Résumer
L'essentiel est de faire certaines opérations d'initialisation sur ISCROLL, d'afficher différentes informations rapides pour différentes actions, puis d'écrire des méthodes de rafraîchissement correspondantes et de charger davantage de méthodes de traitement pour les événements de traction et de traction.