WeChat Mini Programı ve Micro Mall (2): E-ticaret ana sayfa karuseli, sınıflandırılmış gezinme ve yeni ürün satışının gerçekleştirilmesi
Önceki gönderi: WeChat Mini Programı ve Micro Mall (1): https çerçeve yapımı ve navigasyon işlevinin gerçekleştirilmesi
Bu makaleyi okumadan önce herkes bir önceki makaleyi okumalı
Önsöz
Önceki makalede, applet arka plan sunucusunun https alan adı ayarını kurduk, applet temelinin https çerçevesini oluşturduk ve ana sayfa gezinme modülünü uyguladık.Bugün, e-ticaret ana sayfa karuseli, kategori gezinme ve yeni ürün satış modüllerinin uygulamasına bir göz atalım.
İşlevsel modülleri uygulayın
Ana gerçekleştirme 2, 3, 4 , Kullanılan API veri hizmeti aşağıda gösterilmiştir:
Ana Sayfa Atlı Karınca Modül Uygulaması
home.js
< ! - Ana sayfa atlıkarınca banner'ı - > < swiper göstergesi-dots = "{{indicDots}}" autoplay = "{{autoplay}}" interval = "{{interval}}" süre = "{{süre}}" > < blok wx: for = "{{banner}}" > < swiper-item > < image src = "{{item.imgUrl}}" mode = "widthFix" / > < / swiper-item > < /blok > < / swiper >home.wxss
/ * Swiper özelliklerini doğrudan ayarlayın * / swiper { yükseklik: 300rpx; } swiper-item image { genişlik:% 100; yükseklik:% 100; }home.js
Sayfa başlatma döngü verileri
veri: { navbars: null, // Önceki makaledeki gezinme başlatma verileriyle devam edin currentTab: 0, // Önceki makaledeki gezinme başlatma verileriyle devam edin banner'lar: boş, indicDots: true, // Panel gösterge noktalarının görüntülenip görüntülenmeyeceği autoplay: true, // Otomatik olarak geçiş yapılıp yapılmayacağı aralık: 3000, // Otomatik anahtarlama zaman aralığı, 3s süre: 1000, // Kayan animasyon süresi 1sn },Atlı karınca veri işlevi yükleme sayfa başlatma
/ ** * Yaşam döngüsü işlevi izleme sayfası yükleme * / onLoad: function (seçenekler) { var that = this; // Navbar gezinme çubuğunu yükleyin, önceki gezinme verilerine bağlanın that.navbarShow (); // Afiş karuselini yükle that.bannerShow (); },döngü verilerini almak için ajax
bannerShow: function (success) { var that = this; ajax.request ({ yöntem: 'GET', url: 'ev / başlıklar? anahtar =' + utils.key, başarı: veri = > { that.setData ({ banner'lar: data.result }) console.log (data.result) } }) },Ana sayfa sınıflandırması gezinme gerçekleştirme
home.js
< ! - Kategori Gezinme - > < görünüm > < view class = "donanma" > < block wx: for-items = "{{menus}}" wx: key = "name" > < view class = "nav-item" data-type = "{{item.menuName}}" data-typeid = "{{item.id}}" > < image src = "{{item.imgUrl}}" class = "nav-image" / > < Metin > {{item.menuName}} < /Metin > < /görünüm > < /blok > < /görünüm > < /görünüm >home.wxss
/ * ================== Kategori Gezinme ==================== * / .navs { ekran: esnek; haklı içerik: sol; esnek yön: sıra; esnek sarma: sarma; } .nav-item { genişlik:% 25; ekran: esnek; hizalama öğeleri: merkez; esnek yön: sütun; / * dolgu: 20rpx; * / padding-top: 20rpx; } .nav-item .nav-image { genişlik: 80rpx; yükseklik: 80rpx; / * border-radius: 50%; kenarlık yuvarlatılmış köşeyi ayarlayın * / } .nav-item text { padding-top: 20rpx; yazı tipi boyutu: 25rpx; }home.js
Sayfa başlatma kategorisi gezinme verileri
veri: { navbars: null, // Gezinme verileri currentTab: 0, banner'lar: boş, // Atlı karınca verileri indicDots: true, // Panel gösterge noktalarının görüntülenip görüntülenmeyeceği autoplay: true, // Otomatik olarak geçiş yapılıp yapılmayacağı aralık: 3000, // Otomatik anahtarlama zaman aralığı, 3s süre: 1000, // Kayan animasyon süresi 1sn menüler: null, // Kategorize gezinti verileri},Sayfa başlatma yükleme sınıflandırması gezinme verileri işlevi
/ ** * Yaşam döngüsü işlevi izleme sayfası yükleme * / onLoad: function (seçenekler) { var that = this; // Navbar gezinme çubuğunu yükle that.navbarShow (); // Afiş karuselini yükle that.bannerShow (); // Menü kategorisi gezinme menüsünü yükleyin that.menuShow (); },sınıflandırılmış navigasyon verilerini almak için ajax
menuShow: function (success) { var that = this; ajax.request ({ yöntem: 'GET', url: 'home / menüler? key =' + utils.key, başarı: veri = > { that.setData ({ menüler: data.result }) console.log (data.result) } }) },Ana sayfa yeni ürün satış modülü gerçekleştirme
home.js
< view class = "ayrı" > < /görünüm > < view class = "cate-container" > < view class = "kategori başlığı" > < text class = "name" > Yeni ürün satışı < /Metin > < view class = "line_flag" > < /görünüm > < block wx: for-items = "{{markalar}}" wx: key = "id" > < gezgin url = "/ sayfalar / ayrıntı / ayrıntı" > < image class = "head-img" src = "{{item.imgUrl}}" mode = "widthFix" > < / resim > < / navigator > < text class = "marka-adı" > {{öğe adı}} < /Metin > < view class = 'pas' > < image class = "activity-logo" src = "../../ images / activity_logo.png" mode = "widthFix" > < / resim > {{item.remark}} < /görünüm > < /blok > < /görünüm > < /görünüm >home.wxss
/ * ================== Yeni ürün satış stili ==================== * / .category-title { ekran: esnek; esnek yön: sütun; margin-top: 20rpx; kenar boşluğu alt: 0rpx; dolgu: 0px 10px; } .category-title .title { yazı tipi boyutu: 14px; yazı tipi ağırlığı: 900; } .category-title .line_name { yazı tipi boyutu: 10px; renk: # 98989f; ekran: esnek; gerekçelendirme içeriği: boşluk arası; } / * Bölme çizgisi * / .separate { yükseklik: 15rpx; arka plan rengi: # f2f2f2; } .category-title { ekran: esnek; esnek yön: sütun; margin-top: 25rpx; kenar boşluğu alt: 0rpx; } .category-title .name { yazı tipi boyutu: 40rpx; metin hizalama: merkez; kenar boşluğu: 10rpx otomatik; } .line_flag { genişlik: 80rpx; yükseklik: 1rpx; ekran: satır içi blok; kenar boşluğu: 20rpx otomatik; arka plan rengi: gainsboro; metin hizalama: merkez; } .hat { genişlik:% 100; yükseklik: 2rpx; ekran: satır içi blok; kenar boşluğu: 20rpx 0rpx; arka plan rengi: gainsboro; metin hizalama: merkez; } .head-img { genişlik:% 100; } .marka adı{ yazı tipi ağırlığı: 600; yazı tipi boyutu: 32rpx; } .activity-logo { genişlik: 35rpx; yükseklik: 35rpx; margin-right: 10rpx; / * pozisyon: mutlak; * / } .pms { yazı tipi boyutu: 28rpx; kenar boşluğu alt: 20rpx; ekran: esnek; haklı içerik: sol; esnek yön: satır; renk: # 5771a8; }home.js
Sayfada yeni ürün satış verilerini başlatın
veri: { navbars: null, // Gezinme verileri currentTab: 0, banner'lar: boş, // Atlı karınca verileri indicDots: true, // Panel gösterge noktalarının görüntülenip görüntülenmeyeceği autoplay: true, // Otomatik olarak geçiş yapılıp yapılmayacağı aralık: 3000, // Otomatik anahtarlama zaman aralığı, 3s süre: 1000, // Kayan animasyon süresi 1sn menüler: null, // Kategori gezinti verileri markalar: null, // Yeni ürün satış verileri},Yeni ürün satış verileri işlevi yükleniyor sayfa başlatma
/ ** * Yaşam döngüsü işlevi izleme sayfası yükleme * / onLoad: function (seçenekler) { var that = this; // Navbar gezinme çubuğunu yükle that.navbarShow (); // Afiş karuselini yükle that.bannerShow (); // Menü kategorisi gezinme menüsünü yükleyin that.menuShow (); // Yeni ürün satışı yükle that.brandShow (); },ajax yeni ürün satış verilerini alır
brandShow: function (success) { var that = this; ajax.request ({ yöntem: 'GET', url: 'etkinlik / markalar? key =' + utils.key + 'type = temaipage = 1size = 5', başarı: veri = > { that.setData ({ markalar: data.result.list }) console.log ("markalar:" + data.result.list) } }) },Efekt önizlemesini gerçekleştirin
Açıklamalar: Bu makale, e-ticaret vakalarının reformunu gerçekleştirmek için herkesin modüler bir düşünceye sahip olmasını daha iyi sağlamak içindir.Bu yöntem, gerçek çalışma sahnesine daha yakın olduğu ve aynı zamanda kendi kodlamanızı daha standartlaştırılmış ve daha okunaklı hale getirdiği için takipte hala kullanılacaktır. Seks.
Bizi takip et
Kaynak koduna ihtiyacınız varsa, "IT Actual Combat Alliance" a dikkat edip bir mesaj bırakabilirsiniz (WeChat alışveriş merkezi kaynak kodu, 5 kelime kaynak kodu indirme adresini alacaktır) veya değişim grubuna ve yazarla sohbet etmek için katılabilirsiniz ~~~
