Précédent: Applet micro Mall (C): Accueil fournisseur d'électricité rafraîchissement déroulante illimitée obtenir l'API de données dynamique

voir les résultats

plan de développement

1, pour obtenir la mise en page les détails du produit (trois modules pour y parvenir, la tête du carrousel d'images de produits, les prix des matières premières et la description du produit, les détails des matières premières montrent) 2, API demande des données de charge dynamique selon l'une différente utilisateur clique produit

Obtenir les détails du produit modèle de données API basée sur l'ID du produit

Il sont détaillées ci-dessous le modèle de données peuvent être visualisées Oh!

home.js augmenter la liste des événements de saut

Rappelez-vous que nous faisons sur une marchandise Cliquez ici pour voir les détails de l'événement ont été recueillis? Donc, couplé à la page Détails du produit fonction de saut, comme indiqué ci-dessous:

detail.wxml

< Chipeur indicateur-points = "{{}} indicatorDots" Autoplay = "{{}}" autoplay intervalle = "{{intervalle}}" durée = "{{duration}}" > < bloc wx: for = "{{goods.imgUrls}}" > < Chipeur-article > < l'image src = "{{item}}" data-src = "{{item}}" Mode bindtap = "previewImage" = "widthFix" > < / image > < / Chipeur-article > < / Bloc > < / Chipeur > < ! - prix des matières premières et la description des marchandises - > < vue > < Voir class = "product-name-wrap" > {{Goods.title}} < / Voir > < Voir class = "produit-prix-wrap" > < vue > < p class = "produit-prix neuf" > ¥ {{goods.price}} < / P > < p class = "produit-prix-old" > Liste ¥ {{goods.privilegePrice}} < / P > < / Voir > < / Voir > < / Voir > < Voir class = « détails » > < défilement vue défilement y = « true » > < texte > Détails du produit < / texte > < bloc wx: pour-produits = "{{}} goods.detailImg" WX: key = "name" > < classe image = "image_detail" src = "{{item}}" mode = "widthFix" / > < / Bloc > < vue class = "temp" > < / Voir > < / Défilement vue > < / Voir >

detail.wxss

la page { afficher: flex; -Flex direction: colonne; hauteur: 100%; } / * Définir la propriété directement Chipeur * / Chipeur { / * Hauteur: 500rpx; * / hauteur: 750rpx; } l'image Chipeur-item { largeur: 100%; hauteur: 100%; } / ** ** prix des matières premières / .Product-prix-wrap { afficher: flex; justifier contenu: l'espace entre / ** ** Justifier / -Flex direction: rangée; Emballage souple: wrap; margin: 5px 5px; / * frontière: 1rpx solide rouge; * / } .Product-prix-wrap .Product prix neuf { couleur: rouge; Font-size: 40rpx; marge: 10rpx; } .Product-prix-wrap .Product prix âgé { color: # 888; text-decoration: line-through; padding-left: 5px; Font-size: 12px; line-height: 30px; font-weight: 300; } .Product-name-wrap { margin: 0px 10px; Font-size: 14px; color: # 404040; } .details { padding: 5px 00 5px; } .detail { afficher: flex; -Flex direction: colonne; margin-top: 15rpx; margin-bottom: 0rpx; } .detail .title { Font-size: 40rpx; marge: 10rpx; couleur: noir; text-align: justify; hauteur: 100rpx; } .detail .prix { couleur: rouge; Font-size: 40rpx; marge: 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; } .detail-nav { afficher: flex; -Flex direction: rangée; ALIGN-éléments: center; float: left; background-color: #fff; Position: fixe; bas: 0; droite: 0; z-index: 1; largeur: 100%; hauteur: 100rpx; } .button-vert { background-color: # 4caf50; / * Vert * / } .button-rouge { background-color: # f44336; / * rouge * / } .button-addCar { background-color: # f44336; / * rouge * / largeur: 100%; } .image_detail { largeur: 100%; / * Hauteur: 750rpx; * / } l'image .detail-nav { largeur: 70rpx; hauteur: 50rpx; marge: 20rpx 40rpx; } .line_nav { largeur: 5rpx; hauteur: 100%; background-color: Gainsboro; } / * Empreinte * / .temp { hauteur: 100rpx; }

detail.js

const ajax = require ( » ../../ utils / ajax.js'); const utils = require ( » ../../ utils / util.js'); var imgUrls = ; var detailImg = ; var goodsId = null; marchandises var = null; Page ({/ ** * Page de données initiale * / données: { isLike: true, showDialog: false, produits: 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 // } // image preview previewImage: function (e) { courant var = e.target.dataset.src; wx.previewImage ({ : courant, // http lien vers l'image affichée urls: // http this.data.imgUrls liens doivent images de prévisualisation Liste }) }, / ** * Fonction du cycle de vie - pour écouter chargement de la page * / onLoad: function (options) { var = ce que; goodsId = options.goodsId; console.log ( 'goodsId:' + goodsId); // charge Détails sur le produit that.goodsInfoShow (); }, goodsInfoShow: function (success) { var = ce que; Ajax.Request ({ méthode: 'GET', url: '? produits / clé getGoodsInfo =' + utils.key + '& goodsId =' + goodsId, succès: data = >  { var goodsItem = data.result; for (var i = 0; i <  goodsItem.shopGoodsImageList.length; i ++) { imgUrls  = GoodsItem.shopGoodsImageList .imgUrl; } détails var = goodsItem.details.split ( ";"); for (var j = 0; j <  details.length; j ++) { detailImg  = Détails ; } produits = { imgUrls: imgUrls, Titre: goodsItem.name, Prix: goodsItem.price, privilegePrice: goodsItem.privilegePrice, detailImg: detailImg, imgURL: goodsItem.imgUrl, buyRate: goodsItem.buyRate, goodsId: goodsId, compter: 1, totalMoney: goodsItem.price, } that.setData ({ marchandises: marchandises }) console.log (goods.title) } }) }, })

remarque

Canaux Micro données série applet micro-centre commercial sont acquises par https dynamique et présent, il est recommandé de commencer à lire le premier chapitre. Nous pouvons soutenir cette série d'articles continueront à le mettre à jour, je vous remercie!

Petite série micro-programme de micro-canal centre commercial

Micro magasin l'applet (a): https structures de trames et de la fonction de navigation

micro-applet-canal Micro Mall (2): Le fournisseur d'électricité carrousel d'accueil, navigation et classification pour obtenir une nouvelle vente

Applet micro Mall (C): Accueil fournisseur d'électricité rafraîchissement déroulante illimitée obtenir l'API de données dynamique

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 code source téléchargement, doivent regarder le code source dans le mode d'emploi prendra beaucoup moins de détours), peuvent aussi rejoindre le groupe et auteur d'un échange mutuel allumeuse oh ~ ~ ~