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

轉載自：https://www.jianshu.com/p/5d48eb86bc53

先回顧一下上篇文章，我們講解了底部導航欄和頂部導航欄的製作，大家應該都記得把，基本上電商小程序都會帶底部當導航欄，所以底部導航欄一定要會哦~，今天吶，我將教大家另一個必須會的，banner 圖的製作，也叫廣告輪播圖，就是我們經常看到首頁自動輪播的那個控件。

廣告輪播圖的製作

先上效果讓大家過過癮，是不是很眼熟，別急，看完這篇文章，你也可以輕鬆製作出這樣的效果。

我還是把廣告輪播圖寫在 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: 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的基礎啦，我就放在這裏統一講，先上效果圖

我們接下來要做的佈局就是廣告輪播圖下面的品牌館模塊佈局、以及新品上架這個模塊的佈局
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>

其實代碼已經有註釋了，我用帶有顏色的框區分，是爲了讀者更好的理解，第一個紅框是 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括號的外邊，程序就一直報錯，招了好半天，才發現是這麼低級的錯誤，所以我踩過的坑已經提醒你們了，不要繼續掉坑裏哦~
最後放一張這幾天我帶領大家實現的代碼效果圖。

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

廣告輪播圖的製作

界面佈局

TDengine docker安裝方法

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

Navicat安裝與激活教程

vue某個界面不引用公共組件

Vue+axios獲得後端數據並展示

vue+element ui 實現點擊上邊菜單切換下邊不同界面

Vue+Element UI 搭建新項目

vue+element ui 走馬燈添加圖片+圖片自適應

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結