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

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

上一篇 下一篇
微信小程序商城电商整套系列相关推荐:
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>
 如果对页面结构不了解,可以看看下面图片框框,把一个整体模块都框框在一起。

模板简介:该模板名称为【微信小程序开发商城电商首页整体布局制作设计】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 33,549次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-15
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信公众平台 企业网站 html5 微信文章 响应式 微信图片 微信模板 微信素材 自适应
您可能会喜欢的其他模板