Anterior: Micro-canal micro-applet Mall (2): O fornecedor de electricidade Início carrossel, navegação e classificação de alcançar nova venda

Dicas: Devido ao pequeno shopping série micro-programa de micro-canal estão chamando o modelo de dados do serviço API obtido de forma dinâmica através de https, recomendado para andar através de micro-canal micro-applet Mall (a): https construir a função de estrutura e navegação.

Os resultados mostram

Homem de poucas palavras, disse, procurando atingir diretamente os resultados:

fornecedor de electricidade Início revisão

Como mostrado acima, o fornecedor de electricidade Início Dir apenas cinco módulos - benefícios especiais, benefícios especiais é uma lista de coleção usaremos o baixo ilimitado para atualizar o caminho para alcançar a mudança nos negócios.

Bem-estar Data Model Session

Sessão Welfare detalhes API pode optar por ver o caso através do acesso https://100boot.cn.

home.wxml

Bem-estar layout da lista especial

< ! - especial start-- bem-estar > < classe vista = "bem-estar-recipiente" > < vista classe = "categoria-título" > < classe text = "título" > benefícios especiais < / Texto > < classe view = "LINE_NAME" > < texto > 1008:00 todas as manhãs sobre o tempo de novo < / Texto > < / View > < / View > < rolagem-view rolagem-y = "true" > < classe view = "welfares" > < bloco wx: for-items = "{{newGoods}}" wx: key = "id" > < classe view = "welfares-bom" catchtap = "catchTapCategory" data-name = "{{item.name}}" data-goodsid = "{{item.id}}" > < vista > < imagem src = "{{item.imgUrl}}" class = modo "welfares-image" = "widthFix" / > < / View > < classe view = "product-name" > {{Item.name}} < / View > < classe view = "produto-preço-wrap" > < p class = "produto-preço-novo" > ¥ {{item.price}} < / P > < p class = "produto-preço-old" > ¥ {{item.privilegePrice}} < / P > < p class = "desconto" > {{Item.discount}} off < / P > < / View > < / View > < / Bloco > < / View > < / Rolo-vista >   < / View >   < ! - especial end-- bem-estar >

Benefícios lista drop-down para carregar o layout mais especial

  < vista class = "weui-loadmore" escondida = "{{escondido}}" > < classe vista = "weui-carregamento" > < / View > < vista class = "weui-loadmore__tips" > Carregando esforços < / View > < / View >

home.wxss

Bem-estar estilos CSS lista especial

/ ** ** ============ ========= bem-estar especial / .welfares { exibir: Flex; justificar-content: left; flex-sentido: fileira; Flex-wrap: envoltório; margem: 10px 5px; } .welfares-bom {/ * Altura: 500rpx; * / largura: 47%; margin: auto 0px; -margem inferior: 20 p; posição: relativa; display: inline-bloco; fonte de tamanho: 24rpx; / * fronteira: 1 px #eee sólido; * / } .welfares-image { largura: 100%; display: inline-bloco; fronteira: sólido #eee 1 px; } .welfares de boa .product-name { color: # 000; / * height: 28px; * / text-align: left; margem: 0px 5px; -margem inferior: 5px; } .product-preço-wrap { altura: 40rpx; } .product-preço-wrap .product-preço-novo { color: # e80080; -margem esquerda: 5px; fonte de peso: 900; fonte de tamanho: 30rpx; } .product-preço-wrap .product-preço de idade { color: # 888; text-decoration: line-through; padding-left: 2px; } .discount .product-preço-wrap { posição: absoluto; direita: 5px; background-color: # 000; Cor: #fff; }

Sessão Welfare lista drop-down para carregar mais estilo

/ * * Coloque mais / .weui-carregamento { margem: 05px; largura: 20 p; altura: 20 p; display: inline-bloco; vertical-align: meio; -webkit-animação: weuiLoading 1s etapas (12, final) infinito; animação: weuiLoading 1s etapas (12, final) infinito; background: url transparente (dados: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI + PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMi Igcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8 + PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4 =) não-repetição; fundo de tamanho: 100%; } .weui-loadmore { largura: 65%; margin: 1.5em auto; A linha-altura: 1.6em; fonte de tamanho: 12 pixels; text-align: center; } .weui-loadmore__tips { display: inline-bloco; vertical-align: meio; color: # 888; }

home.js

Welfare lista de inicialização especial

# Inicialização artigos de dados conectado var sectionData = ; var ifLoadMore = nulo; página var = 1; // primeiro a página padrão dados: { oculto: false, },

Página inicial carregar a lista de função de bem-estar especial

# papéis Ligue / ** * A função de Ciclo de Vida - ouvir página é carregada * / onLoad: function (options) { // benefícios carga especiais that.newGoodsShow (); },

lista especial bem-estar dos dados modelo de processamento

newGoodsShow: function (sucesso) { var que esta =; Ajax.Request ({ método: 'GET', url: 'bens / chave getHotGoodsList =' + utils.key + '& page =' + página + '& size = 10', sucesso: dados = >  { var newGoodsData = data.result.list; página + = 1; if (ifLoadMore) { // Coloque mais if (newGoodsData.length >  0) { console.log (newGoodsData) // tratamento comprimento título para (var i em newGoodsData) { // tratamento comprimento nome Nome var = newGoodsData .name; if (nome.length >  26) { newGoodsData .name = name.substring (0, 23) + '...'; } } sectionData = sectionData concatenação (newGoodsData) .; } Else { ifLoadMore = false; this.setData ({ oculto: true }) wx.showToast ({ Título: 'Não mais! ' icon: 'carregar', Duração: 2000 }) } } Else { if (ifLoadMore == null) { ifLoadMore = true; // título e comprimento de processamento data for (var i em newGoodsData) {Processamento Comprimento // Nome Nome var = newGoodsData .name; if (nome.length >  26) { newGoodsData .name = name.substring (0, 23) + '...'; } } sectionData = newGoodsData; atualização // } } that.setData ({ newGoods: sectionData , // isHideLoadMore: true }); wx.stopPullDownRefresh (); // animação Fim } }) },

Puxe assentamento eventos especiais na lista de benefícios

 / ** * Bottoming manipulador de eventos para puxar a página * / onReachBottom: função () { o console.log ( "pull"); var que esta =; o console.log ( 'Load mais'); if (ifLoadMore! = null) { that.newGoodsShow (); } },

Clique aqui para obter mais detalhes de coleta de eventos

catchTapCategory: função (e) { var que esta =; var goodsId = e.currentTarget.dataset.goodsid; console.log ( 'goodsId:' + goodsId); // usuário adicionar o número de cliques that.goodsClickShow (goodsId); // Ir detalhes // wx.navigateTo ({url: '../detail/detail?goodsId=' + goodsId}) }, goodsClickShow (goodsId) { o console.log ( 'aumento do número de usuários clique em'); var que esta =; Ajax.Request ({ método: 'GET', url: 'bens / chave addGoodsClickRate =' + utils.key + '& goodsId =' + goodsId, sucesso: dados = >  { console.log ( "usuário clica no levantamento estatístico O resultado:" + data.message) } }) },

NOTA: Este artigo é para o melhor, para que possamos ter um pensamento modular para alcançar casos fornecedor mudança de eletricidade, follow-up ainda vai ser assim, porque o mais perto do trabalho cena real, mas também para sua codificação pode aumentar leitura mais padronizado sexo.

shopping série micro-programa pequeno micro-channel

loja Micro applet (a): https estruturas de quadros e navegação função

Micro-canal micro-applet Mall (2): O fornecedor de electricidade Início carrossel, navegação e classificação de alcançar nova venda follow Us

Se você precisar do código fonte pode se concentrar em "IT aliança de combate" e uma mensagem (micro fonte Mall, cinco palavras receberia fonte endereço de download de código), você também pode se juntar ao grupo e troca de ponto mútuo oh ~ ~ ~