uni-app实现仿微信前端（二）

uni-app实现仿微信前端（二）

5. 完善通讯录界面

1. 首先观察手机微信= =，不难看出共同点
   
   所有的栏目都是左边图片右边描述
2. 所以，建立相应的class

<view class="row">
	<view class="row_logo">
		<image src="../../static/icon/book/xdpy.png" mode=""></image>
	</view>
	<view class="row_right">
		<text>新的朋友</text>
	</view>
</view>

3. 然后编写row类的css样式(这里使用scss)

.row{
   
		background: white;
		display: flex;
		width: 100%;
		height: 50px;
		.row_logo{
   
			width: 18%;
			display: flex;
			align-items: center;
			image{
   
				width: 38px;
				height: 38px;
				margin: auto;
				border-radius: 5px;
			}
		}
		.row_right{
   
			height: 100%;
			width: 84%;
			display: flex;
			align-items: center;
			border:{
   
				bottom:1px solid #DDDDDD;
			}
			text{
   
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}
			
		}
	}
	/*最后一行是没有下横线的*/
	.row:last-child{
   
		.row_right{
   
			border: 0;
		}
	}

4.完善其他细节，直接上代码

<template>
	<view class="content">
		<view class="top">
			<view class="row">
				<view class="row_logo">
					<image src="../../static/icon/book/xdpy.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>新的朋友</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../static/icon/book/ql.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>群聊</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../static/icon/book/bq.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>标签</text>
				</view>
			</view>
			
			<view class="row">
				<view class="row_logo">
					<image src="../../static/icon/book/gzh.png" mode=""></image>
				</view>
				<view class="row_right">
					<text>公众号</text>
				</view>
			</view>
		</view>
		
		<view class="qiye-box qu" v-if="qiyes.length > 0">
			<view class="tip">
				<text>我的企业</text>
			</view>
			<view class="qiyes">
				<view class="row" v-for="qiye in qiyes">
					<view class="row_logo">
						<image :src="qiye.src"></image>
					</view>
					<view cla