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

Conseils: En raison du petit micro-canal centre série de micro-programme appellent le modèle de données de service API obtenu dynamiquement par https, recommandé de marcher à travers des micro-applet micro-canal Mall (a): https construire la fonction-cadre et la navigation.

Les résultats montrent

Homme de peu de mots dit, à la recherche d'atteindre directement les résultats:

Électricité fournisseur Accueil Revue

Comme indiqué plus haut, le fournisseur d'électricité Accueil Dir seulement cinq modules - prestations spéciales, des prestations spéciales est une liste de collection, nous utiliserons le bas illimité pour actualiser la façon de réaliser des affaires de changement.

Bien-être session Modèle de données

les détails de l'API Session du bien-être peuvent choisir de voir l'affaire par l'accès https://100boot.cn.

home.wxml

Bien-être mise en page de liste spéciale

< ! - le bien-être start-- de spécial > < vue class = « bien-être-conteneur » > < vue class = « catégorie titre » > < classe text = "title" > prestations spéciales < / texte > < vue class = "LINE_NAME" > < texte > 108h00 tous les matins à l'heure sur les nouvelles < / texte > < / Voir > < / Voir > < défilement vue défilement y = « true » > < vue class = "welfares" > < bloc wx: for-items = "{{}} newGoods" WX: key = "id" > < vue class = "welfares-bon" catchtap = "catchTapCategory" data-name = "{{item.name}}" données goodsid = "{{item.id}}" > < vue > < l'image src = "{{item.imgUrl}}" class = mode "welfares image" = "widthFix" / > < / Voir > < Voir class = "product-name" > {{Item.name}} < / Voir > < Voir class = "produit-prix-wrap" > < p class = "produit-prix neuf" > ¥ {{item.price}} < / P > < p class = "produit-prix-old" > ¥ {{item.privilegePrice}} < / P > < p class = "discount" > {{}} Item.discount off < / P > < / Voir > < / Voir > < / Bloc > < / Voir > < / Défilement vue >   < / Voir >   < ! - le bien-être end-- de spécial >

déroulante liste des avantages pour charger la mise en page plus spécial

  < vue class = "weui-loadmore" caché = "{{}} caché" > < vue class = « weui chargement » > < / Voir > < vue class = "weui-loadmore__tips" > efforts de chargement < / Voir > < / Voir >

home.wxss

Bien-être Liste spéciale styles CSS

/ ** ** ============ ========= bien-être spécial / .welfares { afficher: flex; justifier contenu: left; -Flex direction: rangée; Emballage souple: wrap; margin: 10px 5px; } .welfares-bonne {/ * Hauteur: 500rpx; * / largeur: 47%; margin: auto 0px; margin-bottom: 20px; position: relative; display: inline-block; Font-size: 24rpx; / * border: 1px #EEE solide; * / } .welfares image { largeur: 100%; display: inline-block; border: 1px solid #EEE; } .welfares-bonne .Product nom { color: # 000; / * hauteur: 28px; * / text-align: left; margin: 0px 5px; margin-bottom: 5px; } .Product-prix-wrap { hauteur: 40rpx; } .Product-prix-wrap .Product prix neuf { color: # e80080; margin-left: 5px; font-weight: 900; Font-size: 30rpx; } .Product-prix-wrap .Product prix âgé { color: # 888; text-decoration: line-through; padding-left: 2px; } .Product-prix-wrap .discount { position: absolute; droite: 5px; background-color: # 000; couleur: #fff; }

Session du bien-être de la liste déroulante pour charger plus de style

/ * * Charger plus / .weui chargement { marge: 05px; largeur: 20px; hauteur: 20px; display: inline-block; Vertical-align: moyenne; -webkit-animation: les étapes de weuiLoading (12, fin) infini; animation: weuiLoading pas de 1s (12, fin) infinite; background: url transparent (data: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI + PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMi Igcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4 =) no-repeat; Taille de fond: 100%; } .weui-loadmore { largeur: 65%; margin: auto 1.5em; line-height: 1.6em; Font-size: 12px; text-align: center; } .weui-loadmore__tips { display: inline-block; Vertical-align: moyenne; color: # 888; }

home.js

Bien-être la liste d'initialisation spéciale

# données d'initialisation des articles connectés var sectionData = ; var ifLoadMore = null; var page = 1; // d'abord la page par défaut données: { caché: false, },

première page charger la liste des fonctions spéciales de bien-être

# papiers Connect / ** * Fonction du cycle de vie - pour écouter chargement de la page * / onLoad: function (options) { // charge avantages spéciaux that.newGoodsShow (); },

Bien-être liste spéciale des données modèle de traitement

newGoodsShow: function (success) { var = ce que; Ajax.Request ({ méthode: 'GET', url: '? produits / clé getHotGoodsList =' + utils.key + '& page =' + Page + '& size = 10', succès: data = >  { var newGoodsData = data.result.list; Page + = 1; si (ifLoadMore) { // Charger plus si (newGoodsData.length >  0) { console.log (newGoodsData) // traitement de la longueur du titre for (var i dans newGoodsData) { nom // traitement de la longueur var name = newGoodsData .name; si (name.length >  26) { newGoodsData .name = name.substring (0, 23) + '...'; } } sectionData = sectionData concat (newGoodsData) .; Else {} ifLoadMore = false; this.setData ({ caché: true }) wx.showToast ({ Titre: « Pas plus! ' icône: « chargement », Durée: 2000 }) } } Else { if (ifLoadMore == NULL) { ifLoadMore = true; // titre et la durée de traitement de date for (var i dans newGoodsData) {// Nom traitement Longueur var name = newGoodsData .name; si (name.length >  26) { newGoodsData .name = name.substring (0, 23) + '...'; } } sectionData = newGoodsData; // rafraîchissement } } that.setData ({ newGoods: sectionData , // isHideLoadMore: true }); wx.stopPullDownRefresh (); // animation Fin } }) },

Tirez creux de la vague des événements spéciaux sur la liste des avantages

 / ** * Talonnage gestionnaire d'événements pour tirer la page * / onReachBottom: function () { le console.log ( "pull"); var = ce que; le console.log ( 'charge plus'); si (ifLoadMore! = null) { that.newGoodsShow (); } },

Cliquez ici pour plus de détails collection d'événements

catchTapCategory: function (e) { var = ce que; var goodsId = e.currentTarget.dataset.goodsid; console.log ( 'goodsId:' + goodsId); // Ajout d'un utilisateur du nombre de clics that.goodsClickShow (goodsId); // détails Jump // wx.navigateTo ({url: '../detail/detail?goodsId=' + goodsId}) }, goodsClickShow (goodsId) { le console.log ( « augmentation du nombre d'utilisateurs de cliquer sur »); var = ce que; Ajax.Request ({ méthode: 'GET', url: '? produits / clé addGoodsClickRate =' + utils.key + '& goodsId =' + goodsId, succès: data = >  { console.log ( « utilisateur clique sur le relevé statistique du résultat: » + data.message) } }) },

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.

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 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 ~ ~ ~