這篇文章主要介紹了微信小程序商城開發(fā)之商城首頁(yè)輪播圖、商品分類導(dǎo)航以及新品特賣如何實(shí)現(xiàn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的10年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如紙箱等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致夸獎(jiǎng)。

實(shí)現(xiàn)功能模塊

主要實(shí)現(xiàn)2、3、4，用到的API數(shù)據(jù)服務(wù)如下圖所示：

首頁(yè)輪播模塊實(shí)現(xiàn)

home.js

home.wxss

/* 直接設(shè)置swiper屬性 */
swiper {  
    height: 300rpx;
}
swiper-item image {  
    width: 100%;  height: 100%;
}

home.js

頁(yè)面初始化輪播數(shù)據(jù)

data: {
    navbars:null,//接上篇導(dǎo)航初始化數(shù)據(jù)
    currentTab: 0,//接上篇導(dǎo)航初始化數(shù)據(jù)
    banners:null,
    indicatorDots: true, //是否顯示面板指示點(diǎn)
    autoplay: true, //是否自動(dòng)切換
    interval: 3000, //自動(dòng)切換時(shí)間間隔,3s
    duration: 1000, //  滑動(dòng)動(dòng)畫時(shí)長(zhǎng)1s
  },

頁(yè)面初始化加載輪播數(shù)據(jù)函數(shù)

/**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */

onLoad: function (options) {    
    var that = this;    //加載navbar導(dǎo)航條，接上篇導(dǎo)航數(shù)據(jù)
    that.navbarShow();   //加載banner輪播
    that.bannerShow();
  },

ajax獲取輪播數(shù)據(jù)

bannerShow: function (success) {    
    var that = this;
    ajax.request({      
        method: 'GET',      
        url: 'home/banners?key=' + utils.key,      
        success: data => {
        that.setData({          
            banners: data.result
        })        
        console.log(data.result)
      }
    })
  },

首頁(yè)分類導(dǎo)航實(shí)現(xiàn)

home.js

 
  
    
      
        
        {{item.menuName}}
      
    
  
 

home.wxss

/*=================分類導(dǎo)航====================*/
.navs {  
    display: flex; 
    justify-content: left; 
    flex-direction: row;  
    flex-wrap: wrap;  
}
.nav-item {  
    width: 25%;  
    display: flex;  
    align-items: center;  
    flex-direction: column; 
    /* padding: 20rpx; */
    padding-top: 20rpx;
}
.nav-item .nav-image {  
    width: 80rpx;  
    height: 80rpx;  /* border-radius: 50%;設(shè)置邊界圓角 */
}
.nav-item text {  
    padding-top: 20rpx;  
    font-size: 25rpx;
}

home.js

頁(yè)面初始化分類導(dǎo)航數(shù)據(jù)

data: {
    navbars:null,//導(dǎo)航數(shù)據(jù)
    currentTab: 0,
    banners:null, //輪播數(shù)據(jù)
    indicatorDots: true, //是否顯示面板指示點(diǎn)
    autoplay: true, //是否自動(dòng)切換
    interval: 3000, //自動(dòng)切換時(shí)間間隔,3s
    duration: 1000, //  滑動(dòng)動(dòng)畫時(shí)長(zhǎng)1s
    menus: null, //分類導(dǎo)航數(shù)據(jù)},

頁(yè)面初始化加載分類導(dǎo)航數(shù)據(jù)函數(shù)

/**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {    
    var that = this;    //加載navbar導(dǎo)航條
    that.navbarShow();    //加載banner輪播
    that.bannerShow();    //加載menu分類導(dǎo)航菜單
    that.menuShow();
  },

ajax獲取分類導(dǎo)航數(shù)據(jù)

menuShow: function (success) {    
    var that = this;
    ajax.request({      
    method: 'GET',      
    url: 'home/menus?key='+ utils.key,      
    success: data => {
        that.setData({          
            menus: data.result
        })        
        console.log(data.result)
      }
    })
  },

首頁(yè)新品特賣模塊實(shí)現(xiàn)

home.js

 
    
      新品特賣
      
      
        
        
        
        {{item.name}} 
        
        
        {{item.remark}}        
       
         
  

home.wxss

/*=================新品特賣 樣式====================*/
  .category-title {  
    display: flex;  
    flex-direction: column;  
    margin-top: 20rpx;  
    margin-bottom: 0rpx;  
    padding: 0px 10px;
  
} 
 .category-title .title{  
    font-size: 14px;  
    font-weight:900;
} 

.category-title .line_name{  
    font-size: 10px;  
    color: #98989f;  
    display: flex;  
    justify-content:space-between;

} 
/* 分割線 */

.separate {  
    height: 15rpx;  
    background-color: #f2f2f2;
}
.category-title {  
    display: flex;  
    flex-direction: column;  
    margin-top: 25rpx;  
    margin-bottom: 0rpx;
}
.category-title .name {  
    font-size: 40rpx;  
    text-align: center;  
    margin: 10rpx auto;
}
.line_flag {  
    width: 80rpx;  
    height: 1rpx;  
    display: inline-block;  
    margin: 20rpx auto;  
    background-color: gainsboro;  
    text-align: center;
}
.line {  
    width: 100%;  
    height: 2rpx;  
    display: inline-block;  
    margin: 20rpx 0rpx;  
    background-color: gainsboro;  
    text-align: center;
}
.head-img {  
    width: 100%;
}
.brand-name{  
    font-weight: 600; 
    font-size: 32rpx;
}  
.activity-logo {  
    width:35rpx;  
    height:35rpx;  
    margin-right: 10rpx;  /* position: absolute; */

}
.pms{  
    font-size: 28rpx;  
    margin-bottom: 20rpx;  
    display: flex; 
    justify-content: left; 
    flex-direction: row;  color: #5771a8;
}

home.js

頁(yè)面初始化新品特賣數(shù)據(jù)

data: {
    navbars:null,//導(dǎo)航數(shù)據(jù)
    currentTab: 0,
    banners:null, //輪播數(shù)據(jù)
    indicatorDots: true, //是否顯示面板指示點(diǎn)
    autoplay: true, //是否自動(dòng)切換
    interval: 3000, //自動(dòng)切換時(shí)間間隔,3s
    duration: 1000, //  滑動(dòng)動(dòng)畫時(shí)長(zhǎng)1s
    menus: null, //分類導(dǎo)航數(shù)據(jù)
    brands: null, //新品特賣數(shù)據(jù)},

頁(yè)面初始化加載新品特賣數(shù)據(jù)函數(shù)

/**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {    
    var that = this;    //加載navbar導(dǎo)航條
    that.navbarShow();    //加載banner輪播
    that.bannerShow();    //加載menu分類導(dǎo)航菜單
    that.menuShow();   //加載新品特賣
    that.brandShow();
  },

ajax獲取新品特賣數(shù)據(jù)

brandShow: function (success) {    
var that = this;
    ajax.request({      
        method: 'GET',      
        url: 'activity/brands?  key='+utils.key+'&type=temai&page=1&size=5',      
        success: data => {
        that.setData({          
            brands: data.result.list
        })        
            console.log("brands：" + data.result.list)
      }
    })
  },

實(shí)現(xiàn)效果預(yù)覽

備注：本文是為了更好的讓大家能夠有模塊化的思維來實(shí)現(xiàn)改電商案例，后續(xù)依然會(huì)采用這種方式，因?yàn)楦N近與實(shí)際工作場(chǎng)景，也讓自己的編碼更加的規(guī)范增加可閱讀性。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序商城開發(fā)之商城首頁(yè)輪播圖、商品分類導(dǎo)航以及新品特賣如何實(shí)現(xiàn)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!