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 class="row_right"><text>{{qiye.name}}</text></view></view></view></view><view class="star-box qu" v-if="stars.length > 0"><view class="tip"><text>星标朋友</text></view><view class="stars"><view class="row" v-for="star in stars"><view class="row_logo"><image :src="star.src"></image></view><view class="row_right"><text>{{star.name}}</text></view></view></view></view><view class="qu" v-for="qu in friends"><view class="tip"><text>{{qu.title}}</text></view><view class="friends row" v-for="friend in qu.children"><view class="row_logo"><image :src="friend.src"></image></view><view class="row_right"><text>{{friend.name}}</text></view></view></view></view>
</template><script>export default {data() {return {qiyes:[{id:1,name:'中山大学',src:'../../static/demo/book/head1.jpg'},{id:2,name:'阿里巴巴',src:'../../static/demo/book/head2.jpg'}],stars:[{id:1,name:'丑丑',src:'../../static/demo/book/head1.jpg'},{id:2,name:'不丑',src:'../../static/demo/book/head2.jpg'}],friends:[{title:'A',children:[{id:3,name:'阿姨',src:'../../static/demo/book/head1.jpg'}]},{title:'B',children:[{id:2,name:'不丑',src:'../../static/demo/book/head2.jpg'}]},{title:'C',children:[{id:1,name:'丑丑',src:'../../static/demo/book/head1.jpg'},{id:4,name:'陈无名',src:'../../static/demo/book/head2.jpg'}]},{title:'Z',children:[{id:5,name:'张aa',src:'../../static/demo/book/head1.jpg'},{id:6,name:'张张张',src:'../../static/demo/book/head2.jpg'}]}]}},methods: {}}
</script><style lang="scss">@import '../../font.css';page{background: #EEEEEE;}.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;}}.qu{.tip{margin: 10px 0;font-size: 14px;font-family: 'syht';text{margin-left: 13px;}}}</style>

展示：

6. 完善其他页面

方法同上，用到的都是基础的html\css知识，就不一一介绍了
成品：

代码如下：
message.vue:

<template><view class="content"><view class="row"><view class="row_logo"><image src="../../static/demo/book/head1.jpg" mode=""></image></view><view class="row_right"><view class="row_right_box"><view class="row_name"><text>丑丑</text></view><view class="row_message"><text>啦啦啦</text></view></view></view></view><view class="row"><view class="row_logo"><image src="../../static/demo/book/head1.jpg" mode=""></image></view><view class="row_right"><view class="row_right_box"><view class="row_name"><text>不丑</text></view><view class="row_message"><text>啦啦啦</text></view></view></view></view></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {}}
</script><style lang="scss">@import '../../font.css';page {background: #EEEEEE;}.row {background: white;display: flex;width: 100%;height: 70px;.row_logo {width: 18%;display: flex;align-items: center;image {width: 48px;height: 48px;margin: auto;border-radius: 5px;}}.row_right {height: 100%;width: 84%;border: {bottom: 1px solid #DDDDDD;}position: relative;font-family: 'syht';display: flex;align-items: center;.row_right_box{width: 100%;height: 80%;view{height: 50%;width: 100%;display: flex;align-items: center;text{display: block;}}.row_name{font-size: 40rpx;}.row_message{font-size: 32rpx;color: #8F8F94;}}}}.row:last-child {.row_right {border: 0;}}
</style>

find.vue:

<template><view class="content"><view><view class="row"><view class="row_logo"><image src="../../static/icon/find/pyq.png" mode=""></image></view><view class="row_right"><text>朋友圈</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view><view class="line"></view><view><view class="row"><view class="row_logo"><image src="../../static/icon/find/sys.png" mode=""></image></view><view class="row_right"><text>扫一扫</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view><view class="row"><view class="row_logo"><image src="../../static/icon/find/yyy.png" mode=""></image></view><view class="row_right"><text>摇一摇</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view><view class="line"></view><view><view class="row"><view class="row_logo"><image src="../../static/icon/find/kyk.png" mode=""></image></view><view class="row_right"><text>看一看</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view><view class="row"><view class="row_logo"><image src="../../static/icon/find/sou.png" mode=""></image></view><view class="row_right"><text>搜一搜</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view><view class="line"></view><view><view class="row"><view class="row_logo"><image src="../../static/icon/find/fjdr.png" mode=""></image></view><view class="row_right"><text>附近的人</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view><view class="line"></view><view><view class="row"><view class="row_logo"><image src="../../static/icon/find/gw.png" mode=""></image></view><view class="row_right"><text>购物</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view><view class="row"><view class="row_logo"><image src="../../static/icon/find/yx.png" mode=""></image></view><view class="row_right"><text>游戏</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view><view class="line"></view><view class="row"><view class="row_logo"><image src="../../static/icon/find/xcx.png" mode=""></image></view><view class="row_right"><text>小程序</text><image class="icon_right" src="../../static/icon/right.png" mode=""></image></view></view></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">@import '../../font.css';page {background: #EEEEEE;}.line{width: 100%;height: 10px;}.row {background: white;display: flex;width: 100%;height: 50px;.row_logo {width: 18%;display: flex;align-items: center;image {width: 32px;height: 32px;margin: auto;border-radius: 5px;}}.row_right {position: relative;height: 100%;width: 84%;display: flex;align-items: center;border: {bottom: 1px solid #DDDDDD;}text {font-size: 16px;font-family: 'syht';display: block;}.icon_right{position: absolute;right: 10px;width: 15px;height: 15px;opacity: .5;}}}.row:last-child {.row_right {border: 0;}}
</style>

uni-app实现仿微信前端（二）相关推荐

uni-app实现仿微信前端（一）
uni-app实现仿微信前端(一) 1.介绍最近了解到了uni-app这个框架(用一套代码同时构建多端app,如小程序.安卓APP.H5等),觉得挺有趣的.因为语法就是html\css\js的语法, ...
Flutter开发实战高仿微信（二）发现页
Flutter开发实战高仿微信(二)发现页 Flutter开发实战高仿微信(二)发现页 1.1 微信发现页面简述 1.2 APP框架优化 1.2.1 配置APP Logo和启动图片 1.2.2 配 ...
iOS15仿微信详情二维码支持保存本地相册
iOS15仿微信详情二维码支持保存本地相册具体实现步骤请在b站搜索上面标题
ReactNative聊天APP实战|仿微信聊天/朋友圈/红包界面
项目简介最近一直在研究RN技术,想着找个项目练练手,之前就有使用vue.react技术开发过聊天项目,这次就使用reactNative技术开发个仿微信RN版.是基于 react-native+rea ...
IM即时通信多房间聊天室仿微信聊天(二)
IM即时通信多房间聊天室仿微信聊天(服务器自定义处理客户端消息) 在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构,接下来重点就是如何在自己的后台接收并处理客户端用户的消息了 ...
仿微信个人二维码切换样式
今天产品突然让我做一个像微信一个可以换样式的二维码功能,在网上找了一下,没有发现有类似的功能,于是决定自己写一个,在此记录一下,希望对有这种需求的开发人员有帮助. 1.样式展示 2.原理说明 a.先生 ...
uni app 调用网络打印机_前端工程师 | 原生小程序坑点：uni-app到底好用在哪里？...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
Android中自定义logo二维码绘制（仿微信QQ二维码）
自定义Logo二维码绘制(追加上一篇简单二维码绘制) 1.实现思路 2.实现(新增拍照以及相册上传logo以及分享和保存二维码) 简单绘制二维码地址: Android 实现简单绘制二维码(包含带LOG ...
Android仿高德地图app,Android仿微信调用第三方地图应用导航（高德、百度、腾讯）...
好久没有写Andorid代码啦!最近刚好要实现一个这个功能,顺便就在博客里分享一下. 实现目标先来一张微信功能截图看看要做什么其实就是有一个目的地,点击目的地的时候弹出可选择的应用进行导航. 大脑 ...

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

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

5. 完善通讯录界面

6. 完善其他页面

uni-app实现仿微信前端（二）相关推荐

最新文章

热门文章