Précédent: petit micro magasin programme de micro-canaux (a): Construction de structures et la fonction de navigation HTTPS
Avant de regarder ce document, assurez-vous de lire l'article
avant-propos
carrousel Accueil fournisseur d'électricité, nous atteignons un petit programme mis en place un serveur back-end https paramètres du nom de domaine, mis en place un petit programme HTTPS cadre et la mise en uvre du module de navigation Accueil, et aujourd'hui nous sommes ensemble Navigation dans la catégorie et la vente de nouveaux modules.
Réaliser des modules fonctionnels
La réalisation principale 2,3,4 , API de service de données utilisé comme indiqué ci-dessous:
Accueil Accessoires du module carrousel
home.js
< ! - Accueil bannière Carrousel - > < Chipeur indicateur-points = "{{}} indicatorDots" Autoplay = "{{}}" autoplay intervalle = "{{intervalle}}" durée = "{{duration}}" > < bloc wx: for = "{{}} bannières" > < Chipeur-article > < l'image src = "{{}} item.imgUrl" mode = "widthFix" / > < / Chipeur-article > < / Bloc > < / Chipeur >home.wxss
/ * Définir la propriété directement Chipeur * / Chipeur { hauteur: 300rpx; } l'image Chipeur-item { largeur: 100%; hauteur: 100%; }home.js
Page carrousel de données d'initialisation
données: { navbars: null, // données d'initialisation connecté navigation articles currentTab: 0, // données d'initialisation connecté navigation articles bannières: null, indicatorDots: true, // si le panneau d'affichage indique le point AutoPlay: true, // si pour passer automatiquement intervalle 3000, // intervalle de temps de commutation automatique, 3s durée: 1000, lorsque la diapositive animée 1s // },Page initiale charge la fonction de carrousel de données
/ ** * Fonction du cycle de vie - pour écouter chargement de la page * / onLoad: function (options) { var = que cela; // navigation de chargement barre de navigation, les données de navigation connectés articles that.navbarShow (); // charge le carrousel bannière that.bannerShow (); },acquisition de données de type carrousel ajax
BannerShow: function (success) { var = ce que; Ajax.Request ({ méthode: 'GET', url: '? home / bannières key =' + utils.key, succès: data = > { that.setData ({ bannières: data.result }) console.log (data.result) } }) },Accueil Navigation dans la catégorie à atteindre
home.js
< ! - Navigation dans la catégorie - > < vue > < vue class = « marine » > < bloc wx: pour-éléments = "{{}} menus" WX: key = "name" > < vue class = "nav-item" type data = "{{item.menuName}}" données typeid = "{{item.id}}" > < l'image src = "{{item.imgUrl}}" class = "nav image" / > < texte > {{Item.menuName}} < / texte > < / Voir > < / Bloc > < / Voir > < / Voir >home.wxss
/ * ================= Navigation dans la catégorie ==================== * / .navs { afficher: flex; justifier contenu: left; -Flex direction: rangée; Emballage souple: wrap; } .nav-item { largeur: 25%; afficher: flex; ALIGN-éléments: center; -Flex direction: colonne; / * Rembourrage: 20rpx; * / padding-top: 20rpx; } .nav-élément de l'image { largeur: 80rpx; hauteur: 80rpx; / *-rayon de la bordure: 50%; à condition filet de bordure * / } .nav-élément texte { padding-top: 20rpx; Font-size: 25rpx; }home.js
Catégorie Navigation Page données d'initialisation
données: { NavBars: null, // données de navigation currentTab: 0, bannières: null, // carrousels indicatorDots: true, // si le panneau d'affichage indique le point AutoPlay: true, // si pour passer automatiquement intervalle 3000, // intervalle de temps de commutation automatique, 3s durée: 1000, lorsque la diapositive animée 1s // menus: les données de navigation de classification null, //},fonction de données de navigation de classification initiale de chargement de la page
/ ** * Fonction du cycle de vie - pour écouter chargement de la page * / onLoad: function (options) { var = que cela; // navigation chargement navbar that.navbarShow (); // charge le carrousel bannière that.bannerShow (); // Menu chargement Menu catégorie de navigation that.menuShow (); },obtenir des données de navigation ajax classé
menuShow: function (success) { var = ce que; Ajax.Request ({ méthode: 'GET', url: 'home / menus key =' + utils.key, succès: data = > { that.setData ({ menus: data.result }) console.log (data.result) } }) },Accueil Nouveau module à vendre
home.js
< vue class = « séparée » > < / Voir > < vue class = « cat-conteneur » > < vue class = « catégorie titre » > < classe text = "name" > Nouveautés < / texte > < vue class = "line_flag" > < / Voir > < bloc wx: pour-produits = "{{}} marques" WX: key = "id" > < navigateur url = "/ pages / detail / détail" > < classe image = "tête-img" src = "{{}} item.imgUrl" mode = "widthFix" > < / image > < / Navigator > < classe text = « marque » > {{Item.name}} < / texte > < vue class = 'pas' > < classe image = "activité logo" src = "../../ images / activity_logo.png" mode = "widthFix" > < / image > {{Item.remark}} < / Voir > < / Bloc > < / Voir > < / Voir >home.wxss
/ * Vente Style ================= New ==================== * / .category-titre { afficher: flex; -Flex direction: colonne; margin-top: 20rpx; margin-bottom: 0rpx; padding: 0px 10px; } .title .category-titre { Font-size: 14px; font-weight: 900; } .line_name .category-titre { Font-size: 10px; color: # 98989f; afficher: flex; justifier contenu: l'espace entre; } / * Dividing line * / .separate { hauteur: 15rpx; background-color: # f2f2f2; } .category-titre { afficher: flex; -Flex direction: colonne; margin-top: 25rpx; margin-bottom: 0rpx; } .name .category-titre { Font-size: 40rpx; text-align: center; margin: auto 10rpx; } .line_flag { largeur: 80rpx; hauteur: 1rpx; display: inline-block; margin: auto 20rpx; background-color: Gainsboro; text-align: center; } .line { largeur: 100%; hauteur: 2rpx; display: inline-block; marge: 20rpx 0rpx; background-color: Gainsboro; text-align: center; } .head-img { largeur: 100%; } .marque-name { font-weight: 600; Font-size: 32rpx; } .activity-logo { largeur: 35rpx; hauteur: 35rpx; margin-right: 10rpx; / * position: absolute; * / } .pms { Font-size: 28rpx; margin-bottom: 20rpx; afficher: flex; justifier contenu: left; Direction flex: rangée; color: # 5771a8; }home.js
données d'initialisation nouvelle vente page
données: { NavBars: null, // données de navigation currentTab: 0, bannières: null, // carrousels indicatorDots: true, // si le panneau d'affichage indique le point AutoPlay: true, // si pour passer automatiquement intervalle 3000, // intervalle de temps de commutation automatique, 3s durée: 1000, lorsque la diapositive animée 1s // menus: null, // Catégorie données de navigation marques: null, // la nouvelle vente} données,Vente de nouvelle page initiale charge la fonction de données
/ ** * Fonction du cycle de vie - pour écouter chargement de la page * / onLoad: function (options) { var = que cela; // navigation chargement navbar that.navbarShow (); // charge le carrousel bannière that.bannerShow (); // Menu chargement Menu catégorie de navigation that.menuShow (); // chargement de nouvelles offres that.brandShow (); },Nouvelle acquisition de données offres ajax
brandShow: function (success) { var = ce que; Ajax.Request ({ méthode: 'GET', url:? activité / marques key = '+ utils.key + '& type = temai & page = 1 & size = 5', succès: data = > { that.setData ({ marques: data.result.list }) console.log ( "marques:" + data.result.list) } }) },Obtenez des résultats aperçu
NOTE: Cet article est pour le mieux afin que nous puissions avoir une pensée modulaire pour obtenir des cas le fournisseur d'électricité de changement, le suivi sera toujours ainsi, parce que le plus proche du travail de scène réelle, mais aussi à leur codage plus normalisé peut augmenter la lecture le sexe.
Suivez-nous
Si vous avez besoin du code source peut se concentrer sur « l'Alliance en TI combat » et un message (micro source de Mall, cinq mots recevraient l'adresse source de téléchargement de code), vous pouvez également rejoindre le groupe et l'échange de point commun oh ~ ~ ~
