uni-app实现仿微信前端(二)
5. 完善通讯录界面
- 首先观察手机微信= =,不难看出共同点
所有的栏目都是左边图片右边描述 - 所以,建立相应的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>
- 然后编写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