微信小程序?qū)崙?zhàn)篇-電商（二）

哈嘍丸升，大家好铆农，今天總于擠出時間，寫第二篇啦狡耻，自從決定寫文章才發(fā)現(xiàn)時間都不夠用啊墩剖，廢話不多說，我們直接進入正題吧夷狰！
先回顧一下上篇文章岭皂，我們講解了底部導(dǎo)航欄和頂部導(dǎo)航欄的制作，大家應(yīng)該都記得把沼头，基本上電商小程序都會帶底部當(dāng)導(dǎo)航欄爷绘，所以底部導(dǎo)航欄一定要會哦~，今天吶进倍，我將教大家另一個必須會的土至，banner 圖的制作，也叫廣告輪播圖猾昆，就是我們經(jīng)程找颍看到首頁自動輪播的那個控件。

廣告輪播圖的制作

先上效果讓大家過過癮垂蜗，是不是很眼熟楷扬，別急，看完這篇文章贴见，你也可以輕松制作出這樣的效果烘苹。

廣告輪播圖.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黍图，已經(jīng)可以算老生常談了曾雕，幾乎每篇都會遇到，所以就一帶而過不講了助被，不懂的自己查詢前面幾篇文章剖张，

home.wxss

/* 直接設(shè)置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 就是數(shù)據(jù)了，imgUrls揩环、indicatorDots搔弄、autoplay、interval丰滑、duration這些個字段在 home.wxml 都有用到顾犹，不明白的看注釋，已經(jīng)寫的很清楚了

界面布局

剩下的布局都是css的基礎(chǔ)啦褒墨，我就放在這里統(tǒng)一講炫刷，先上效果圖

效果圖.png

我們接下來要做的布局就是廣告輪播圖下面的品牌館模塊布局、以及新品上架這個模塊的布局

home.wxml


  <!-- 分類導(dǎo)航 -->
  <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

其實代碼已經(jīng)有注釋了郁妈，我用帶有顏色的框區(qū)分浑玛，是為了讀者更好的理解，第一個紅框是 banner噩咪，這個上面講過了顾彰，跳過，第二個紅框分類導(dǎo)航胃碾，view 層包含一個 for 循環(huán)的 block 模塊拘央，每個模塊里有一個 image 控件和 text 控件，對比效果圖书在，對應(yīng)的就是品牌館、類目等數(shù)據(jù)拆又，這里我再從新教一遍如何看懂這些代碼儒旬，拿分類導(dǎo)航來說

<view class="navs"> 第一行這么寫，class字段意思是給這個view定義了名叫 navs 的樣式帖族，那navs樣式在哪里吶栈源，在對應(yīng)名下的.wxss 樣式里，所以我們要去 home.wxss 去找navs 竖般，
data-xxx甚垦，xxx就是你給home.js里提供的數(shù)據(jù)關(guān)鍵詞，home.js通過獲取xxx關(guān)鍵詞來獲取xxx里面的數(shù)據(jù)，回調(diào)數(shù)據(jù)的時候會用的到
image src src很容易理解了艰亮，是填圖片路徑闭翩，要求這個圖片路徑要正確，就是必須可以讀取的到迄埃，不然會報異常

回顧到此結(jié)束疗韵，接著看最后一個紅框，紅框中的第二個綠框侄非，新控件
scroll-view 看單純就知道他的作用蕉汪，滾動的視圖嘛，就是scroll-view里面包含了很多view 當(dāng)超過屏幕的時候逞怨，你可以滾動查看被遮蓋的view 者疤，看一下scroll-view的屬性

scroll-x 允許橫向滾動
scroll-y 允許縱向滾動
scroll-top 設(shè)置豎向滾動條位置
scroll-left 設(shè)置橫向滾動條位置
bindscrolltoupper 滾動到頂部/左邊，會觸發(fā) scrolltoupper 事件
bindscrolltolower 滾動到底部/右邊叠赦，會觸發(fā) scrolltolower 事件
enable-back-to-top iOS點擊頂部狀態(tài)欄驹马、安卓雙擊標(biāo)題欄時，滾動條返回頂部眯搭，只支持豎向
scroll-with-animation 在設(shè)置滾動條位置時使用動畫過渡

我實現(xiàn)的是橫向滾動窥翩，所以把scroll-x設(shè)置為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%;設(shè)置邊界圓角*/
}

.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等對應(yīng)的樣式在微信小程序入門篇（二）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玉蘭油精油沐浴露玫瑰滋養(yǎng)二合一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 已經(jīng)多次強調(diào)這個是用來放數(shù)據(jù)和處理事件監(jiān)聽的，事件監(jiān)聽先跳過低散，后面會專門出一篇來講解俯邓，數(shù)據(jù)目前也是模擬的數(shù)據(jù)，還沒有涉及到網(wǎng)絡(luò)請求熔号，我要強調(diào)的是稽鞭，所有的模擬數(shù)據(jù)一定要放在page下面的data里，代碼君就犯過錯引镊，寫在data括號的外邊朦蕴，程序就一直報錯篮条，招了好半天，才發(fā)現(xiàn)是這么低級的錯誤吩抓，所以我踩過的坑已經(jīng)提醒你們了涉茧，不要繼續(xù)掉坑里哦~

總結(jié)

好了，如果你照著我的代碼敲的話琴拧，應(yīng)該可以實現(xiàn)這些布局效果降瞳，代碼君想告訴大家的是，一定要動手實踐蚓胸，只有實踐你才會發(fā)現(xiàn)你哪里是真的理解了挣饥，哪里不會，相信我沛膳，實踐后你會對程序的理解更透徹扔枫。好了，今天就講解到這里锹安，住大家周末愉快短荐，最后放一張這幾天我?guī)ьI(lǐng)大家實現(xiàn)的代碼效果圖。

微信商城.gif

上一篇：微信小程序?qū)崙?zhàn)篇-電商（一）

下一篇：微信小程序?qū)崙?zhàn)篇-下拉刷新與加載更多

建了一個小程序技術(shù)交流群叹哭，想入群的讀者請加微信

小程序入群.png

最后編輯于：2018.01.25 09:48:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末忍宋，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子风罩，更是在濱河造成了極大的恐慌糠排，老刑警劉巖，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件超升，死亡現(xiàn)場離奇詭異入宦，居然都是意外死亡，警方通過查閱死者的電腦和手機室琢，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門乾闰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人盈滴，你說我怎么就攤上這事涯肩。” “怎么了巢钓？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵病苗，是天一觀的道長。經(jīng)常有香客問我竿报，道長，這世上最難降的妖魔是什么继谚？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任烈菌，我火速辦了婚禮阵幸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘芽世。我一直安慰自己挚赊，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布济瓢。她就那樣靜靜地躺著荠割，像睡著了一般。火紅的嫁衣襯著肌膚如雪旺矾。梳的紋絲不亂的頭發(fā)上蔑鹦，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天，我揣著相機與錄音箕宙，去河邊找鬼嚎朽。笑死，一個胖子當(dāng)著我的面吹牛柬帕，可吹牛的內(nèi)容都是我干的哟忍。我是一名探鬼主播，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼陷寝，長吁一口氣：“原來是場噩夢啊……” “哼锅很！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起凤跑，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤爆安，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后饶火，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鹏控，經(jīng)...
沈念sama閱讀 45,429評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年肤寝，在試婚紗的時候發(fā)現(xiàn)自己被綠了当辐。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,785評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡鲤看，死狀恐怖缘揪，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情义桂，我是刑警寧澤找筝，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站慷吊，受9級特大地震影響袖裕，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜溉瓶，卻給世界環(huán)境...
茶點故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一急鳄、第九天我趴在偏房一處隱蔽的房頂上張望谤民。院中可真熱鬧，春花似錦疾宏、人聲如沸张足。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案坎藐，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽为牍。三九已至，卻和暖如春岩馍，著一層夾襖步出監(jiān)牢的瞬間碉咆，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工兼雄，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吟逝，地道東北人。一個月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓赦肋，卻偏偏與公主長得像块攒，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子佃乘，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,713評論 2贊 354