欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    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>
     如果对页面结构不了解,可以看看下面图片框框,把一个整体模块都框框在一起。

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议