微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现

迈不过友情╰ 2022-05-22 23:41 180阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

![20180529145830338][]

上一篇：[微信小程序微商城（一）：https框架搭建并实现导航功能][https]

## 大家在看本文前一定要先阅读上一篇文章 ##

前言

> 上一篇我们设置了小程序后台服务器https域名设置、搭建了小程序基础的https框架和实现了首页导航模块，今天我们一起来看一下电商首页轮播、分类导航和新品特卖模块的实现。

实现功能模块

![20180529145920823][]

主要实现**2、3、4**，用到的API数据服务如下图所示：

![2018052914593634][]

首页轮播模块实现

home.js

<swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
        <block wx:for="{ {banners}}">
          <swiper-item>
            <image src="{ {item.imgUrl}}" mode="widthFix"/>
          </swiper-item>
        </block>
      </swiper>

home.wxss

/* 直接设置swiper属性 */ swiper {  
        height: 300rpx;
    }
    swiper-item image {  
        width: 100%;  height: 100%;
    }

home.js

页面初始化轮播数据

data: {
        navbars:null,//接上篇导航初始化数据
        currentTab: 0,//接上篇导航初始化数据
        banners:null,
        indicatorDots: true, //是否显示面板指示点
        autoplay: true, //是否自动切换
        interval: 3000, //自动切换时间间隔,3s
        duration: 1000, //  滑动动画时长1s
      },

页面初始化加载轮播数据函数

/**   * 生命周期函数--监听页面加载   */ onLoad: function (options) {    
        var that = this;    //加载navbar导航条，接上篇导航数据
        that.navbarShow();   //加载banner轮播
        that.bannerShow();
      },

ajax获取轮播数据

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)
          }
        })
      },

首页分类导航实现

home.js

<view>
      <view class="navy">
        <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" />
            <text>{
       {item.menuName}}</text>
          </view>
        </block>
      </view>
     </view>

home.wxss

/*=================分类导航====================*/ .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%;设置边界圆角 */ }
    .nav-item text {  
        padding-top: 20rpx;  
        font-size: 25rpx;
    }

home.js

页面初始化分类导航数据

data: {
        navbars:null,//导航数据
        currentTab: 0,
        banners:null, //轮播数据
        indicatorDots: true, //是否显示面板指示点
        autoplay: true, //是否自动切换
        interval: 3000, //自动切换时间间隔,3s
        duration: 1000, //  滑动动画时长1s
        menus: null, //分类导航数据},

页面初始化加载分类导航数据函数

/**   * 生命周期函数--监听页面加载   */
      onLoad: function (options) {    
        var that = this;    //加载navbar导航条
        that.navbarShow();    //加载banner轮播
        that.bannerShow();    //加载menu分类导航菜单
        that.menuShow();
      },

ajax获取分类导航数据

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)
          }
        })
      },

首页新品特卖模块实现

home.js

<view class="separate"></view>
    <view class="cate-container"> 
        <view class="category-title">
          <text class="name">新品特卖</text>
          <view class="line_flag"></view>
          <block wx:for-items="{ {brands}}" wx:key="id">
            <navigator url="/pages/detail/detail">
            <image class="head-img" src="{ {item.imgUrl}}" mode="widthFix"></image>
            </navigator>
            <text class="brand-name">{
       {item.name}}</text> 
            <view class='pas'>
            <image class="activity-logo" src="../../images/activity_logo.png" mode="widthFix"></image>
            {
       {item.remark}}        </view>
          </block> 
        </view>     
      </view>

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

页面初始化新品特卖数据

页面初始化加载新品特卖数据函数

/**   * 生命周期函数--监听页面加载   */
      onLoad: function (options) {    
        var that = this;    //加载navbar导航条
        that.navbarShow();    //加载banner轮播
        that.bannerShow();    //加载menu分类导航菜单
        that.menuShow();   //加载新品特卖
        that.brandShow();
      },

ajax获取新品特卖数据

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)
          }
        })
      },

实现效果预览

![2cb91e531fd9f4b7a161e4b375ba567c.gif][]

备注：本文是为了更好的让大家能够有模块化的思维来实现改电商案例，后续依然会采用这种方式，因为更贴近与实际工作场景，也让自己的编码更加的规范增加可阅读性。

关注我们

如果需要源码可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址），也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn/
[20180529145830338]: /images/20220523/7c842caf8b8441d7a16b0ed08127d942.png
[https]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=1&sn=b30937e849bece0968ea07ac72b83d11&chksm=fc4df608cb3a7f1ea60ab5b51108c080baa1a79c75c8a7231421d85ec07c7c0ef713cc772b84&mpshare=1&scene=21&srcid=0529JHCRkat1TZ6JuE5B84Tx&key=97e16202f3464a6fd217fb1b4cb8d8a1bff11c180aa3b4e760c011a156810f4c487f3923326138e8d298e4a1a12b4af90f768eacd7568d5d98ae3947997a00982d3e3a9feb8d80ae6a7d7c758e7accfe&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=R09W9iBrT2oqWKeMeEbNu5lu1ZCprD26u8OKfy%20yZYQbrizPWK6jyrUSY0O32kBU#wechat_redirect
[20180529145920823]: /images/20220523/9c748c4c232a446990b603f1a312c051.png
[2018052914593634]: /images/20220523/55bb085e2c81466d89befa7d6d34037c.png
[2cb91e531fd9f4b7a161e4b375ba567c.gif]: /images/20220523/c6a0ae84bd6241489cf7ade2fe41aaf8.png