微信小程序实战篇-电商（二）

哈喽，大家好，今天总于挤出时间，写第二篇啦，自从决定写文章才发现时间都不够用啊，废话不多说，我们直接进入正题吧！
先回顾一下上篇文章，我们讲解了底部导航栏和顶部导航栏的制作，大家应该都记得把，基本上电商小程序都会带底部当导航栏，所以底部导航栏一定要会哦~，今天呐，我将教大家另一个必须会的，banner 图的制作，也叫广告轮播图，就是我们经常看到首页自动轮播的那个控件。

广告轮播图的制作

先上效果让大家过过瘾，是不是很眼熟，别急，看完这篇文章，你也可以轻松制作出这样的效果。

广告轮播图.gif

我还是把广告轮播图写在 home 的页面里了，需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

  <!-- banner -->
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
  </swiper>

swiper 是微信自带的视图，我们直接使用就好，记住 <swiper> 里面一定要包含 <swiper-item>，你用自定义的 view 是无效的，下面介绍一下这个控件的常用属性，

indicator-dots 是否显示面板指示点
autoplay 是否自动切换
interval 自动切换时间间隔
duration 滑动动画时长

剩下的 wx:for，已经可以算老生常谈了，几乎每篇都会遇到，所以就一带而过不讲了，不懂的自己查询前面几篇文章，

home.wxss

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

home.js

// banner
    imgUrls: [
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161219\/148211980641.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/148238831285.png',
      'http:\/\/mz.djmall.xmisp.cn\/files\/banner\/20161222\/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

home.js 就是数据了，imgUrls、indicatorDots、autoplay、interval、duration这些个字段在 home.wxml 都有用到，不明白的看注释，已经写的很清楚了

界面布局

剩下的布局都是css的基础啦，我就放在这里统一讲，先上效果图

效果图.png

我们接下来要做的布局就是广告轮播图下面的品牌馆模块布局、以及新品上架这个模块的布局

home.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>

代码图片.png

其实代码已经有注释了，我用带有颜色的框区分，是为了读者更好的理解，第一个红框是 banner，这个上面讲过了，跳过，第二个红框分类导航，view 层包含一个 for 循环的 block 模块，每个模块里有一个 image 控件和 text 控件，对比效果图，对应的就是品牌馆、类目等数据，这里我再从新教一遍如何看懂这些代码，拿分类导航来说

<view class="navs"> 第一行这么写，class字段意思是给这个view定义了名叫 navs 的样式，那navs样式在哪里呐，在对应名下的.wxss 样式里，所以我们要去 home.wxss 去找navs ，
data-xxx，xxx就是你给home.js里提供的数据关键词，home.js通过获取xxx关键词来获取xxx里面的数据，回调数据的时候会用的到
image src src很容易理解了，是填图片路径，要求这个图片路径要正确，就是必须可以读取的到，不然会报异常

回顾到此结束，接着看最后一个红框，红框中的第二个绿框，新控件
scroll-view 看单纯就知道他的作用，滚动的视图嘛，就是scroll-view里面包含了很多view 当超过屏幕的时候，你可以滚动查看被遮盖的view ，看一下scroll-view的属性

scroll-x 允许横向滚动
scroll-y 允许纵向滚动
scroll-top 设置竖向滚动条位置
scroll-left 设置横向滚动条位置
bindscrolltoupper 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower 滚动到底部/右边，会触发 scrolltolower 事件
enable-back-to-top iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
scroll-with-animation 在设置滚动条位置时使用动画过渡

我实现的是横向滚动，所以把scroll-x设置为true就好，大家可以试一下其他属性，多试试，看效果才能理解每个属性的效果

home.wxss

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

.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;
}

刚刚我们在 home.wxml 中提到的navs、nav-item都在这里，display、flex-directio等对应的样式在微信小程序入门篇（二）wxss样式积累模块里都有记录，不明白属性作用的可以跳过去查阅一下，这个是基本功，不是什么技巧，只能死记硬背。

home.js

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

    hot_products:
    [
      {
        product_id: 1,
        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161222/148237182618.png',
        html: "http://mz.djmall.xmisp.cn/files/activity/20161216/5853a0137573e84/mz2_ajax/index.html"
      },
      {
        product_id: 2,
        imageurl: 'http://mz.djmall.xmisp.cn/files/banner/20161202/148066038440.png',
        html: "http://mz.djmall.xmisp.cn/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://mz.djmall.xmisp.cn/files/product/20161201/148057921620.jpg',
        newprice: "￥200.00",
        oldprice: "￥300.00",
      },
      {
        goodId: 1,
        name: '兰蔻清莹柔肤爽肤水',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
        newprice: "￥120.00",
        oldprice: "￥200.00",
      },
      {
        goodId: 2,
        name: '倩碧水嫩保湿精华面霜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
        newprice: "￥320.00",
        oldprice: "￥400.00",
      },
      {
        goodId: 3,
        name: '特效润肤露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      },
      {
        goodId: 4,
        name: '倩碧焕妍活力精华露',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }, {
        goodId: 5,
        name: '日本资生堂洗颜',
        url: 'bill',
        imageurl: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg',
        newprice: "￥30.00",
        oldprice: "￥80.00",
      }
    ],

    newgoods_head_url:"http://mz.djmall.xmisp.cn/files/banner/20161202/148066062976.jpg",

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

home.js 已经多次强调这个是用来放数据和处理事件监听的，事件监听先跳过，后面会专门出一篇来讲解，数据目前也是模拟的数据，还没有涉及到网络请求，我要强调的是，所有的模拟数据一定要放在page下面的data里，代码君就犯过错，写在data括号的外边，程序就一直报错，招了好半天，才发现是这么低级的错误，所以我踩过的坑已经提醒你们了，不要继续掉坑里哦~

总结

好了，如果你照着我的代码敲的话，应该可以实现这些布局效果，代码君想告诉大家的是，一定要动手实践，只有实践你才会发现你哪里是真的理解了，哪里不会，相信我，实践后你会对程序的理解更透彻。好了，今天就讲解到这里，住大家周末愉快，最后放一张这几天我带领大家实现的代码效果图。

微信商城.gif

上一篇：微信小程序实战篇-电商（一）

下一篇：微信小程序实战篇-下拉刷新与加载更多

建了一个小程序技术交流群，想入群的读者请加微信

小程序入群.png

最后编辑于：2018.01.25 09:48:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,482评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,377评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,762评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,273评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,289评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,046评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,351评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,988评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,476评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,948评论 2赞 324
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,064评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,712评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,261评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,264评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,486评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,511评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,802评论 2赞 345