微信小程式實戰篇-電商（二）

阿新 • • 發佈：2019-01-23

哈嘍，大家好，今天總於擠出時間，寫第二篇啦，自從決定寫文章才發現時間都不夠用啊，廢話不多說，我們直接進入正題吧！
先回顧一下上篇文章，我們講解了底部導航欄和頂部導航欄的製作，大家應該都記得把，基本上電商小程式都會帶底部當導航欄，所以底部導航欄一定要會哦~，今天吶，我將教大家另一個必須會的，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 是微信自帶的檢視，我們直接使用就好，記住裡面一定要包含，你用自定義的 view 是無效的，下面介紹一下這個控制元件的常用屬性

indicator-dots 是否顯示面板指示點
autoplay 是否自動切換
interval 自動切換時間間隔
duration 滑動動畫時長

剩下的 wx:for，已經可以算老生常談了，幾乎每篇都會遇到，所以就一帶而過不講了，不懂的自己查詢前面幾篇文章，

home.wxss

/* 直接設定swiper屬性 */
swiper {
  height: 300 
rpx;
}
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 控制元件，對比效果圖，對應的就是品牌館、類目等資料，這裡我再從新教一遍如何看懂這些程式碼，拿分類導航來說

第一行這麼寫，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

關注微信公眾號獲取最新諮詢

程式碼集中營.jpg

微信小程式實戰篇-電商（二）

廣告輪播圖的製作

介面佈局

總結

關注微信公眾號獲取最新諮詢

微信小程式實戰篇-電商（二）

微信小程式實戰篇-電商（一）

「小程式JAVA實戰」微信小程式的簡要註冊流程（二）

微信小程式支付後端PHP（二）

微信小程式開發-仿今日頭條（二）

微信小程式填坑之路（二）：cover-view

【基於微信小程式的社群電商平臺】需求分析心得——小豆芽

資料庫設計心得——基於微信小程式的社群電商平臺

【基於微信小程式的社群電商平臺】Alpha迭代心得

微信小程式實戰篇-個人中心

微信小程式實戰篇-下拉重新整理與載入更多

微信小程式實戰篇-分類頁面製作

前端微信小程式實戰篇

微信小程式前端開發踩坑（一）

微信小程式開發之小米商城（一）

微信小程式填坑之路（三）：佈局適配方案（rpx、px、vw、vh）

（四）微信小程式之實現輪番效果（swiper）

微信小程式填坑之路（一）：text空格符號以及省略號

微信小程式填坑之路（四）--2016.12.21 更新

微信小程式-原生輪播圖（連續）

微信小程式實戰篇-電商（二）

廣告輪播圖的製作

介面佈局

總結

關注微信公眾號獲取最新諮詢

相關推薦