小程序：通讯录的实现

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 lang="scss" 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，这在以后的小程序都是很有必要的，也是必须要考虑进去的，这是自己一个不完善的点。