小程式：通訊錄的實作

1.address-book.vue

<template>
  <!-- 通訊錄 -->
  <view class="address-book">
    <view class="address-book-header">
      <x-nav-bar input title="通訊錄" @onInputChange="onChange"></x-nav-bar>
    </view>
    <view class="address-book-main">
      <template v-if="resultList.length != 0">
        <view class="main-list">
          <x-phone
            type="3"
            :phoneList="resultList"
            :isCheckbox="false"
            :searchValue="searchValue"
          ></x-phone>
        </view>
      </template>
      <template v-else>
        <x-no-data v-if="!isLoad"></x-no-data>
      </template>
      <template>
        <view class="main-load" v-if="isLoad">
          <u-loading mode="circle"></u-loading>
        </view>
      </template>
    </view>
    <view class="address-book-tab">
      <x-nav-tab></x-nav-tab>
    </view>
  </view>
</template>
           

2.address-book.js

<script>
import serve from "../../../mixin/common.js";
export default {
  name: "address-book",
  data() {
    return {
      // 加載資料的動畫
      isLoad: false,
      // 儲存選擇的人員--用于協助申請
      selectedList: [],
      // 儲存處理後的資料
      resultList: [],
      searchValue: "",
    };
  },
  onShow() {
    this.searchValue = '';
  },
  onLoad() {
    this.isLoad = true;
    this.getContactsList();
  },
  mounted() {},
  
  methods: {
    //擷取通訊錄清單
    getContactsList() {
      serve.setContactsList().then((res) => {
        this.handleData(res.data);
      });
    },
    handleData(data) {
      let temporary = [];

      // 對從背景擷取的資料進行處理
      for (let i = 0, length = data.length; i < length; i++) {
        temporary = data[i].employe;
        this.resultList.push({
          deptName: data[i].deptName,
          list: [],
        });
        for (let j = 0, num = temporary.length; j < num; j++) {
          this.resultList[i].list.push({
            userName: temporary[j].userName,
            userId: temporary[j].userId,
            phone: temporary[j].phone,
          });
        }
      }
      this.isLoad = false;
    },
    // 改變資料
    onChange(value) {
      this.isLoad = true;
      this.searchValue = value;
    },
  },
  onShareAppMessage(res) {},
};
</script>
           

3.address-book.scss

<style  scoped>
.address-book {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &-header {
    width: 100vw;
  }

  &-main {
    flex: 1;
    overflow: scroll;

    .main-load {
      padding: 30rpx 0;
      text-align: center;
    }
  }
}
</style>
           

4.自我總結

1.這個頁面的構成是頭部（搜尋）、中間清單部分（通訊錄清單展示）、頂部（tab欄）三部分組成

在寫x-phone元件的時候，我把頭部也算進去了，但是這種做法是錯誤的，寫元件的時候就寫一個單獨的元件就好了，不要把其他的元件一起綁在一起，切記這個錯誤。

2.頁面的組裝類命名，例如頭部的命名規範class="address-book-header"以及其他的，都有按照這個規範來的，這樣子寫讓人易懂明了，以後要多多注意。

3.頁面的滾動樣式設定，是中間那坨滾動。我記得在第一次做的時候，整個頁面都會拉動，因為我把頭部元件和中間的寫在一坨上了，正确的就是以上的寫法。

4.在中間清單部分顯示部分，我沒有考慮有資料顯示和無資料的情況，按照上面的寫法是外面一個大view，中間是幾種情況的template，這在以後的小程式都是很有必要的，也是必須要考慮進去的，這是自己一個不完善的點。