Comment implémenter un centre commercial en utilisant vue

Cet article présente principalement l'effet de centre commercial (animation de commutation native) basé sur Vue, Vuex et Vue-router. Les amis dans le besoin peuvent se référer au

Le diagramme d'effet est le suivant :

.

Adresse en ligne : github.czero.cn/fancy

Cliquez pour télécharger le package d'installation de l'apk Android

Adresse du code source : github.com/ czero1995/f…

Structure principale du projet

Bibliothèques utilisées

• vue-cli (vue+ échafaudage webpack)

• vue-router (saut de route)

• vuex (gestion de l'état)

• axios (demande de données)

• mock.js (données de fond de simulation)

• vue-touch (jugement gestuel)

• fastclick (résoudre le problème de délai de clic de 300 millisecondes des navigateurs mobiles)

• vue-lazyload (chargement paresseux des images)

• swiper (Carrousel)

Mise en page de conception :

Modifiez toutes les positions de mise en page fixes : fixes (telles que l'en-tête, le pied de page) de la page en position de mise en page absolue :absolute;

Parce que le correctif aura des problèmes de compatibilité inexplicables, par exemple, il échouera sous iOS11 ou iOS8. Une fois le clavier logiciel de la zone de saisie activé, le positionnement fixe en bas apparaîtra, provoquant. l'agencement soit désordonné.

Pour plus de détails sur l'utilisation d'Absolute pour implémenter le correctif, veuillez vous référer à cet article

• HTML5

• CSS3

• Moins

• rem (l'algorithme rem utilisé par Ali)

• Flex (mise en page flexible)

• vue-touch (utilisé pour réaliser la fonction de suppression par balayage gauche du panier) *Animation (transition native vue pour obtenir l'effet d'une application native)

Demande de données :

• Mock (données de base de simulation)

• Axios ( demander des données)

Interaction logique :

• vue (rendu des données, transfert de valeur entre composants)

• vue-router (entre composants Saut de route)

• vuex (gestion globale de l'état)

Plan d'optimisation :

• Tencent Zhitu (compresse les images, réduit la taille des images)

• vue-lazyload (chargement paresseux des images , facilite le chargement des données, améliore les performances des pages Web)

• fastclick (résout le délai de 300 ms côté mobile et améliore la fluidité de l'interaction avec la page)

• vue-rouer (chargement paresseux des itinéraires, séparation Le js de l'application est constitué de plusieurs fichiers js. Allez sur la page correspondante et exécutez le js correspondant)

• webpack (le productionSourceMap dans le fichier config/index.js est modifié en false, il est donc empaqueté. Le fichier ne peut contenir aucun fichier js se terminant par .map et la taille du fichier est réduite d'au moins la moitié)

Détails de la mise en œuvre

Implémentation de l'animation avant et arrière de la page native comparable :

Spécifier la transition : nom

Déclarer l'animation d'entrée et de sortie par défaut dans data

Une fois l'initialisation du rendu des données Mounted() terminée, portez un jugement

Obtenez la valeur de statut de vuex

Ensuite, portez un jugement

Enfin, transmettez le nom du composant actuel à vuex , afin que différents composants puissent avoir différentes animations de commutation.

Animation de la page suivante

.slide-go-enter-active,
.slide-go-leave-active {
 transition: all .5s;
 opacity: .8;
}
.slide-go-enter,
.slide-go-leave-to {
 transition: all .5s;
 transform: translate3d(100%, 0, 0);
 opacity: .8;
}

Retour à l'animation de la page précédente

.slide-back-enter-active,
.slide-back-leave-active {
 transition: all .5s;
}
.slide-back-enter,
.slide-back-leave-to {
 transition: all .5s;
 transform: translate3d(-100%, 0, 0);
}

Faites glisser votre doigt vers la gauche dans le panier pour supprimer

v-touch

Définir le décalage du bouton de suppression en CSS

-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;

Méthode de balayage vers la gauche et la droite

Déclenchez le style de sélection lors du glissement, liez-le

pour que l'élément de liste actuel == la liste du panier, le style sera activé, et glissez vers la gauche pour supprimer

Notez que la boîte sur la page entrera en conflit avec la page native après avoir utilisé la boîte, ce qui entraînera un glissement irrégulier

Par conséquent, vous devez spécifier la méthode de glissement par défaut dans main.js comme déclencheur coulissant horizontal

Sur la page de commande, cliquez sur la navigation supérieure et faites glisser vers la gauche et la droite pour changer de composant et juger des styles d'animation

utilise également le composant v-touch, et l'implémentation est similaire à la commutation de composants. Je donne à chaque composant d'état de commande un numéro différent. Sur la base de ce numéro, je peux déterminer si le composant est une animation coulissante vers la gauche ou une animation coulissante

Ce qui précède. c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles associés :

Il existe plusieurs valeurs de variables de liaison dans vue et des méthodes pour les empêcher de changer (tutoriel détaillé)

Introduction à la différence entre l'utilisation de var foo = function() {} et function foo() pour définir des fonctions en JavaScript (tutoriel détaillé)

Explication détaillée de l'écriture d'une ligne de commande simple en utilisant les outils Node.js (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!