小程序模仿商城（分類）

分類之首頁面

頁面佈局

在說頁面的佈局之前，我先提問一個這樣的問題：image 是該稱之爲標籤還是組件呢？

說實話，我查了查沒有查出來，可能是我對搜索引擎的使用還是麼有掌握精髓的原因吧
但是，我在看別人的博客時，有的人稱之爲標籤，有的人稱之爲組件，但是官方文檔卻將其列到了組件裏，可能官方認爲應該稱之爲組件吧，但是既然有的人稱之爲標籤，再加上在平時pc端寫網頁時稱之爲標籤，所以我就姑且的稱之爲標籤吧

頁面的佈局其實很簡單，左邊和右邊個一個 scroll-view標籤

切換效果的實現

所謂的切換效果就是當你點擊左邊的一個分類時，改分類的字體顏色改變並且左邊多一個 ```border``以及右邊對應數據的改變

左側切換效果

實現這個效果其實很簡單，大致思路就是提前在css樣式裏寫好選中樣式的效果（active），但點擊那個分類時，就給這個分類的 class 加上 active 這個值

<!-- 左側菜單 -->
<scroll-view class="left_menu" scroll-y>
  <block wx:for="{{leftMenuList}}" wx:key="index">
    <view class="menu_item {{currentIndex == index ? 'active' : ''}}" bindtap="getLeftIndex" data-index="{{index}}">
      {{item}}
    </view>
  </block>
</scroll-view>

具體實現思路，在 data 中添加一個屬性 currentIndex ，令這個值默認爲0（代表默認選中第一個分類），爲每個分類添加點擊事件getLeftIndex，並傳遞其 index，在事件處理中令 currentIndex 的值爲傳進去的 index 的值，最後使用三目運算符對 currentIndex 和 index進行判斷等於加上 active，不等與便不用添加

getLeftIndex(e) {
  let index = e.currentTarget.dataset.index;
  this.setData({
    currentIndex: index,
    // 點擊不同的分類出現不同的數據
    rightMenuList: this.Cats[index].children
  })
  console.log(this.data.rightMenuList);
}

在說點擊不同的分類出現不同的數據時，先說一下，這個頁面的數據是如何處理的，數據主要由三大部分組成：左邊的數據leftMenuList和右邊的數據rightMenuList，和請求的全部數據 Cates，全部數據包含了 leftMenuList和rightMenuList，爲了渲染數據時候的方便纔將其分爲兩部分

處理左邊和右邊的數據時，我忘了使用map()這個方法，使用了forEach()，代碼如下

getCatData().then(res => {
  // 1.forEach
  // this.Cates = res.data.message;
  // let letfMenu = [],
  //     rigthContent = [];
  // this.Cates.forEach(item => {
  //   letfMenu.push(item.cat_name);
  //   rigthContent.push(item.children)
  // })
  // this.setData({
  //   leftMenuList: letfMenu,
  //   rightMenuList: rigthContent[0]
  // })
  // 2.map
  this.Cates = res.data.message;
  let leftMenuList = this.Cates.map(v => v.cat_name);
  let rightMenuList = this.Cates[0].children;
  this.setData({
    leftMenuList,
    rightMenuList
  })
}).catch(err => {
  console.log(err);
})

在看原先寫的代碼時，纔想起了map()，其實使用forEach()能做到的map也可以做到，只不過它們有些區別

首先map()會爲執行的結果分配內存空間進行存儲並以新的數組形式將其返回，`而``forEach()不會執行的結果，它返回的是undefined```

另外forEach()會改變原來的數組，而map()不會，它會返回新的數組

右側數據的改變

還記得前面綁定事件時傳遞的參數 index 嗎？請求後得到的所有數據是一個數組，那麼我們就可以通過 index 是 幾，就對數組第幾位的數據進行處理，上面的代碼中有，下面的我只是單拉出來

 rightMenuList: this.Cats[index].children

分類頁面之商品列表頁面

頁面佈局

這個頁面主要是由兩個組件構成

涉及到的知識點有

• 父組件如何向子組件傳值
• 子組件如何想父組件傳值
• 如何實現加載更多
• 下來刷新數據
• 請求數據時，出現正在加載中
• 等

接口文檔

父組件

<!-- pages/goods_list/index.wxml -->
<search></search>
<!-- 通過自定義屬性進行傳值，在子組件的xxx.js文件裏的 properties屬性裏進行接收-->
<tabbar tabs="{{tabs}}" bind:tabItemChange="changeTab">
  <!-- 數據的切換，不過目前只要綜合這一項有數據 -->
  <block wx:if="{{tabs[0].isActive}}">
    <block wx:for="{{goods_list}}" wx:key="index" >
      <view class="first_tab">
        <!-- 進入具體某一見商品的詳情頁面 -->
        <navigator class="goods_item" url="/pages/goods_detail/index?goods_id={{item.goods_id}}">
          <view class="goods_img_wrap">
            <!-- 如果請求的數據沒有圖片，則使用默認圖片進行替代 -->
            <image src="{{item.goods_big_logo || 'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000606020881_1_800x800.jpg'}}" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
          </view>
          <view class="goods_info_wrap">
            <view class="goods_name">{{item.goods_name}}</view>
            <view class="goods_price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
    </block>
  </block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
</tabbar>

// pages/goods_list/index.
// 加載更多功能
// 獲取總頁數 = 總條數 / 頁容量
// 獲取當前頁碼
// 判斷 有刷新數據， 沒有提示沒有
// 有，當前頁碼++ 拼接數據
import {
  getGoodsList
} from '../../service/category'
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabs: [{
        id: 0,
        value: '綜合',
        isActive: true
      },
      {
        id: 1,
        value: '銷量',
        isActive: false,
      },
      {
        id: 2,
        value: '價格',
        isActive: false
      }
    ],
    goods_list: []
  },
  // 接口要接收的參數
  QueryParams: {
    query: '',
    cid: '',
    pagenum: 1,
    pagesize: 10
  },
  // 發送請求
  getData() {
    getGoodsList({
      data: this.QueryParams
    }).then(res => {
      let {
        total,
        goods
      } = res.data.message;
      this.totalPages = Math.ceil(total / this.QueryParams.pagesize);
      this.setData({
      	// 也可使用concat
        goods_list: [...this.data.goods_list, ...goods]
      })
    }).catch(err => {
      console.log(err);
    });
    // 關閉下拉刷新窗口
    wx.stopPullDownRefresh();
  },
  totalPages: 1,
  changeTab(e) {
    // console.log(e.detail);
    let index = e.detail;
    let {
      tabs
    } = this.data;
    tabs.forEach((v, i) => {
      return i === index ? v.isActive = true : v.isActive = false;
    })
    this.setData({
      tabs
    })
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // console.log(options);
    this.QueryParams.cid = options.cid;
    this.getData();
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    // 1. 重置數組
    this.setData({
      goods_list: []
    })
    // 2.重置頁碼
    this.QueryParams.pagenum = 1;
    // 3.發送請求
    this.getData();
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    if (this.QueryParams.pagenum >= this.totalPages) {
      wx: wx.showToast({
        title: '親，到底了~~~',
      })
    }
    else {
      this.QueryParams.pagenum++;
      this.getData();
    }
  },

})

子組件

// components/tabbar/tabbar.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    // 接收父組件傳過來的數據
    tabs: {
      type: Array,
      value: []
    }
  },
  
  /**
   * 組件的初始數據
   */
  data: {
    // 負責切換
    currenIndex: 0
  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 將具體數據的切換交由父組件處理
    getIndex(e) {
      let index  = e.currentTarget.dataset.index;
      // 將當前的選項的index 交由父組件
      this.triggerEvent('tabItemChange', index);
    },
  }
})

<!-- components/tabbar/tabbar.wxml -->
<view class="tabbar">
  <view class="tabbar_title">
    <block wx:for="{{tabs}}" wx:key="id">
      <!-- 實現切換效果 -->
      <view class="tabbar_item {{item.isActive?'active':''}}" bindtap="getIndex" data-index="{{index}}">
        {{item.value}}
      </view>
    </block>
  </view>
  <view class="tabbar_content">
    <slot ></slot>
  </view>
</view>

有一說一，這一頁不知道該怎樣用文字描述，給人別人講還能說出來，所以就只好將代碼貼出來的，不過都加了註釋

還有一頁明天寫，最近身體不太舒服