Anterior: pequeno micro-channel loja programa de micro (a): construção de estruturas e HTTPS função de navegação
Antes de olharmos para este papel, não deixe de ler o artigo
prefácio
Início carrossel fornecedor de electricidade, conseguimos em um pequeno programa de configurar o servidor de back-end https configurações de nome de domínio, criar um pequeno programa baseado https estrutura e implementação do módulo de navegação Home, e hoje nós olhamos juntos Navegação da categoria e venda de novos módulos.
Atingir módulos funcionais
A realização principal 2,3,4 , API do serviço de dados usado como mostrado abaixo:
Início Carrossel implementos módulo
home.js
< ! - Início Carousel banner - > < swiper indicador de pontos = "{{indicatorDots}}" autoplay = "{{autoplay}}" = intervalo de "{{intervalo}}" duration = "{{duração}}" > < bloco WX: for = "{{banners}}" > < swiper item > < imagem src = "{{item.imgUrl}}" mode = "widthFix" / > < / Swiper item > < / Bloco > < / Swiper >home.wxss
/ * Conjunto de propriedades diretamente swiper * / swiper { altura: 300rpx; } imagem swiper item { largura: 100%; altura: 100%; }home.js
Página de dados de inicialização carrossel
dados: { navbars: null, // dados de inicialização conectado navegação artigos currentTab: 0, // dados de inicialização conectado navegação artigos banners: nulo, indicatorDots: true, // se o painel de exibição indica o ponto autoplay: true, // se comutar automaticamente intervalo: 3000, // intervalo automático tempo de comutação, 3s Duração: 1000, quando o slide animado 1s // },função do carrossel de dados de carregamento da página inicial
/ ** * A função de Ciclo de Vida - ouvir página é carregada * / onLoad: function (options) { var que esta =; // carregamento navegação barra de navegação, os dados de navegação ligado artigos that.navbarShow (); // carregar a bandeira carrossel that.bannerShow (); },aquisição de dados carrossel ajax
bannerShow: function (sucesso) { var que esta =; Ajax.Request ({ método: 'GET', url: 'home / banners key =' + utils.key, sucesso: dados = > { that.setData ({ banners: data.result }) console.log (data.result) } }) },Início Categoria Navegação alcançar
home.js
< ! - Categoria Navegação - > < vista > < classe view = "navy" > < bloco WX: para-items = "{{menus}}" wx: key = "nome" > < vista class = "nav-item de" data-type = "{{item.menuName}}" data-typeid = "{{item.id}}" > < imagem src = "{{item.imgUrl}}" class = "nav-image" / > < texto > {{Item.menuName}} < / Texto > < / View > < / Bloco > < / View > < / View >home.wxss
/ * ================= Categoria Navegação ==================== * / .navs { exibir: Flex; justificar-content: left; flex-sentido: fileira; Flex-wrap: envoltório; } .nav item { largura: 25%; exibir: Flex; ALIGN-itens: center; flex-sentido: coluna; / * Enchimento: 20rpx; * / padding-top: 20rpx; } .nav item .nav-image { largura: 80rpx; altura: 80rpx; / * fronteira de raio: 50%; fornecido filete fronteira * / } .nav-item de texto { padding-top: 20rpx; fonte de tamanho: 25rpx; }home.js
dados de inicialização categoria página de navegação
dados: { NavBars: nulos, // dados de navegação currentTab: 0, banners: null, // carrosséis indicatorDots: true, // se o painel de exibição indica o ponto autoplay: true, // se comutar automaticamente intervalo: 3000, // intervalo automático tempo de comutação, 3s Duração: 1000, quando o slide animado 1s // Menus: dados nulo, //} navegação classificação,função de dados de navegação classificação carregamento da página inicial
/ ** * A função de Ciclo de Vida - ouvir página é carregada * / onLoad: function (options) { var que = este; // carregamento de navegação barra de navegação that.navbarShow (); // carregar a bandeira carrossel that.bannerShow (); // menu de categorias de navegação de carga do menu that.menuShow (); },navegação ajax obtenção de dados classificados
menuShow: function (sucesso) { var que esta =; Ajax.Request ({ método: 'GET', url: 'home / menus key =' + utils.key, sucesso: dados = > { that.setData ({ menus: data.result }) console.log (data.result) } }) },Início Novo módulo para venda
home.js
< classe vista = "separado" > < / View > < classe vista = "cate-recipiente" > < vista classe = "categoria-título" > < classe text = "nome" > novo Venda < / Texto > < classe view = "line_flag" > < / View > < bloco wx: for-items = "{{marcas}}" wx: key = "id" > < navegador url = "/ pages / detail / detail" > < classe imagem = "head-img" src = "{{item.imgUrl}}" mode = "widthFix" > < / imagem > < / Navigator > < classe text = "de marca" > {{Item.name}} < / Texto > < classe vista = 'pas' > < classe imagem = "atividade-logo" src = "../../ images / activity_logo.png" mode = "widthFix" > < / imagem > {{Item.remark}} < / View > < / Bloco > < / View > < / View >home.wxss
/ * Estilo Venda ================= New ==================== * / .Mapa-título { exibir: Flex; flex-sentido: coluna; margem superior: 20rpx; -margem inferior: 0rpx; padding: 0px 10px; } .title .Mapa-título { fonte de tamanho: 14 px; fonte de peso: 900; } .line_name .Mapa-título { font-size: 10px; color: # 98989f; exibir: Flex; justificar-content: espaço-entre; } / * Linha de divisão * / .separate { altura: 15rpx; background-color: # f2f2f2; } .Mapa-título { exibir: Flex; flex-sentido: coluna; margem superior: 25rpx; -margem inferior: 0rpx; } .nome .Mapa-título { fonte de tamanho: 40rpx; text-align: center; margin: 10rpx auto; } .line_flag { largura: 80rpx; altura: 1rpx; display: inline-bloco; margin: 20rpx auto; background-color: Gainsb; text-align: center; } .line { largura: 100%; altura: 2rpx; display: inline-bloco; margem: 20rpx 0rpx; background-color: Gainsb; text-align: center; } .head-img { largura: 100%; } .brand-name { fonte de peso: 600; fonte de tamanho: 32rpx; } .activity-logo { largura: 35rpx; altura: 35rpx; -margem direita: 10rpx; / * posição: absoluta; * / } .pms { fonte de tamanho: 28rpx; -margem inferior: 20rpx; exibir: Flex; justificar-content: left; flex-direção: linha; color: # 5771a8; }home.js
Novos dados de inicialização venda página
dados: { NavBars: nulos, // dados de navegação currentTab: 0, banners: null, // carrosséis indicatorDots: true, // se o painel de exibição indica o ponto autoplay: true, // se comutar automaticamente intervalo: 3000, // intervalo automático tempo de comutação, 3s Duração: 1000, quando o slide animado 1s // Menus: nulos, // categoria de dados de navegação marcas: null, // Os novos dados venda},Venda de nova função de dados de carregamento da página inicial
/ ** * A função de Ciclo de Vida - ouvir página é carregada * / onLoad: function (options) { var que = este; // carregamento de navegação barra de navegação that.navbarShow (); // carregar a bandeira carrossel that.bannerShow (); // menu de categorias de navegação de carga do menu that.menuShow (); // carregamento novas ofertas that.brandShow (); },Novas Ofertas de ajax de aquisição de dados
brandShow: function (sucesso) { var que esta =; Ajax.Request ({ método: 'GET', url: 'atividade / marcas =-chave' + utils.key + '& type = temai & page = 1 & size = 5', sucesso: dados = > { that.setData ({ marcas: data.result.list }) console.log ( "marcas:" + data.result.list) } }) },Alcançar resultados pré-visualização
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.
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 ~ ~ ~
