微信小程序开发商城电商首页整体布局制作设计

2018-05-15 09:26　来源/作者：懒人模板　分类：小程序教程　 « »

微信小程序商城电商整套系列相关推荐：
1、微信小程序开发页面顶部导航栏制作设计 [图]
2、微信小程序开发底部导航菜单栏的制作设计 [图]
3、微信小程序开发广告轮播幻灯图制作设计 [图]
4、微信小程序开发商城电商首页整体布局制作设计 [图]
5、微信小程序开发分类页面栅格布局制作与设计 [图]
6、微信小程序开发商品详情页中sku的弹出属性筛选选择框 [图]
7、微信小程序商品正文详情页整体布局制作与设计 [图]
8、微信小程序商城电商购物车页面制作与设计 [图]
9、微信小程序商城电商个人会员中心页面制作设计 [图]

我们在上篇文章主要讲微信小程序电商商城广告轮播幻灯图设计与制作，今天我们接着讲微信小程电商商城广告轮播图下面的品牌馆模块布局、以及新品上架这个模块的布局。达到整体效果如下图：

1、样式文件代码如下：

/*=================品牌馆、类目 的样式====================*/

.navs {
  display: flex;
}

.nav-item {
  width: 25%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20rpx;
}

.nav-item .nav-image {
  width: 80rpx;
  height: 80rpx;
  /*border-radius: 50%;设置边界圆角*/
}

.nav-item text {
  padding-top: 20rpx;
  font-size: 25rpx;
}

/*=================新品上架 样式====================*/

.category-title {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  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;
}

image.head-img {
  width: 100%;
  height: 270rpx;
}

text {
  color: #444;
  font-size: 40rpx;
}

p{
  color: red;
  font-size: 30rpx;
  margin-top: 20rpx;
}

.cate-container {
  color: #fff;
}

/* 分割线 */
.separate {
  height: 15rpx;
  background-color: #f2f2f2;
}

2、js测试数据代码如下：

data: {
    navbar: ['护肤', '彩妆', '香水', '个人护理'],
    currentTab: 0,
    // banner
    imgUrls: [
      'http:\/\/www.lanrenmb.com\/files\/banner\/20161219\/148211980641.png',
      'http:\/\/www.lanrenmb.com\/files\/banner\/20161222\/148238831285.png',
      'http:\/\/www.lanrenmb.com\/files\/banner\/20161222\/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

    hot_products:
    [
      {
        product_id: 1,
        imageurl: 'http://www.lanrenmb.com/files/banner/20161222/148237182618.png',
        html: "http://www.lanrenmb.com/files/activity/20161216/5853a0137573e84/mz2_ajax/index.html"
      },
      {
        product_id: 2,
        imageurl: 'http://www.lanrenmb.com/files/banner/20161202/148066038440.png',
        html: "http://www.lanrenmb.com/files/activity/20161208/584926f0017d874/mz1/index.html"
      }
    ],

    // navItems
    navItems: [
      {
        typeId: 0,
        name: '品牌馆',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_brand.png',
      },
      {
        typeId: 1,
        name: '类目',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_sort.png',
      },
      {
        typeId: 2,
        name: '特惠专场',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_gift.png'
      },
      {
        typeId: 3,
        name: '推荐好友',
        url: 'bill',
        imageurl: '../../images/navItems/home_icon_frends.png'
      }
    ],

    // 新品上架
    goodsItems: [
      {
        goodId: 0,
        name: '兰蔻小黑瓶',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148057921620.jpg',
        newprice: "￥200.00",
        oldprice: "￥300.00",
      },
      {
        goodId: 1,
        name: '兰蔻清莹柔肤爽肤水',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148057953326.jpg',
        newprice: "￥120.00",
        oldprice: "￥200.00",
      },
      {
        goodId: 2,
        name: '倩碧水嫩保湿精华面霜',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148058228431.jpg',
        newprice: "￥320.00",
        oldprice: "￥400.00",
      },
      {
        goodId: 3,
        name: '特效润肤露',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/14805828016.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      },
      {
        goodId: 4,
        name: '倩碧焕妍活力精华露',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148058301941.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }, {
        goodId: 5,
        name: '日本资生堂洗颜',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148058328876.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }
    ],

    newgoods_head_url:"http://www.lanrenmb.com/files/banner/20161202/148066062976.jpg",

    // 新品上架
    recommends: [

      {
        goodId: 7,
        name: 'OLAY玉兰油精油沐浴露玫瑰滋养二合一450ml',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161213/148162245074.jpg',
        newprice: "￥36.60",
        oldprice: "￥40.00",
      },
      {
        goodId: 10,
        name: '兰蔻玫瑰清滢保湿柔肤水嫩肤水化妆水400ml补水保湿温和不刺激',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148057937593.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }, {
        goodId: 11,
        name: 'Lancome/兰蔻清莹柔肤爽肤水/粉水400ml补水保湿玫瑰水化妆水',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148057953326.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      },
      {
        goodId: 12,
        name: '美国CLINIQUE倩碧黄油无油/特效润肤露125ml',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/14805828016.jpg',
        newprice: "￥239.00",
        oldprice: "￥320.00",
      },
      {
        goodId: 13,
        name: '法国LANCOME兰蔻柔皙轻透隔离防晒乳霜50ML2017年3月到期',
        url: 'bill',
        imageurl: 'http://www.lanrenmb.com/files/product/20161201/148058014894.jpg',
        newprice: "￥130.00",
        oldprice: "￥180.00",
      },
    ],
  }

3、wxml首页代码如下：

<!-- 分类导航 -->
  <view class="navs">
    <block wx:for-items="{{navItems}}" wx:key="name">
      <view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
        <image src="{{item.imageurl}}" class="nav-image" />
        <text>{{item.name}}</text>
      </view>
    </block>
  </view>

  <view class="separate"></view>

  <view class="cate-container">

    <view class="category-title">
      <text class="name">新品上架</text>
      <view class="line_flag"></view>
      <image class="head-img" src="{{newgoods_head_url}}"></image>
    </view>

    <scroll-view scroll-x="true">
      <view class="goods">
        <block wx:for-items="{{goodsItems}}" wx:key="name">
          <view class="goods-item" catchtap="catchTapCategory" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
            <image src="{{item.imageurl}}" class="goods-image" />
            <text>{{item.name}}</text>
            <p>{{item.newprice}}</p>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>

如果对页面结构不了解，可以看看下面图片框框，把一个整体模块都框框在一起。

点击扫描效果预览免费下载免登陆网盘下载

标签：

* 懒人模板承诺：本站所有资源免费下载，无病毒，无弹窗，无干扰链接！提点建议

关于: 关于我们; 我们的价值观; 大事记; 版权声明; 广告服务; 联系我们

帮助: 常见问题; 网站地图; 网友投稿; 在线留言; 友情链接

收藏: 加入收藏; 放到桌面; 邮件订阅

关注: 新浪微博; qq空间; 腾讯微博

我们一直在进步: 2018年3月1日懒人招生拼团系统上线！; 2017年7月1日懒人小程序cms系统上线！; 2017年3月25日懒人海报展业系统上线！; 2016年6月25日懒人砍价系统上线！; 2016年3月1日懒人接力系统上线！; 2015年4月24日懒人抽奖系统上线！; 2014年3月25日懒人投票系统上线！; ...