1.address-book.vue
代码语言：javascript复制<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
代码语言：javascript复制<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
代码语言：javascript复制<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，这在以后的小程序都是很有必要的，也是必须要考虑进去的，这是自己一个不完善的点。
