uni-app 5.1~5.3 通讯录列表页开发_uniapp 安卓app实现通讯录详情页面

通讯录列表页面email.nvue

<template>
	<view>
		<!-- 导航栏 -->
		<free-nav-bar title="通讯录"></free-nav-bar>
		<!-- 通讯录列表 -->
			<free-list-item v-for="(item,index) in topList" :key="index"  :title="item.title" :cover="item.cover" @click=""></free-list-item>
			
			<block v-for="(item,index) in list" :key="index">
				<view v-if="item.data.length>0">
					<view class="py-2 px-3 border-bottom bg-light">
						<text class="font-md text-dark">{{item.letter}}</text> 
					</view>
					<free-list-item v-for="(item2,index2) in item.data" :key="index2"  :title="item2" cover="/static/images/mail/friend.png" @click=""></free-list-item>
				</view>
			</block>
			
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	export default {
		components:{
			freeNavBar,
			freeListItem
		},
		data() {
			return {
				topList:[
					{
						title:"新的朋友",
						cover:"/static/images/mail/friend.png",
						event:""
					},
					{
						title:"群聊",
						cover:"/static/images/mail/group.png",
						event:""
					},
					{
						title:"标签",
						cover:"/static/images/mail/tag.png",
						event:""
					}
				],
				list:[{
					"letter":"A",
					"data":[
						"阿苏",
						"阿拉",
						"阿拉",
						"阿拉",
						"阿拉",
						"阿拉"
					]
				},{
					"letter":"B",
					"data":[
						"baba",
						"霸占",
						"吧拉"
					]
				}]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

插件 free-list-item.vue

<template> 
	<view class="bg-white flex align-stretch" hover-class="bg-light" @click="$emit('click')">
		<view class="flex align-center justify-center py-2 px-3">
			<image :src="cover" v-if="cover" style="width: 75rpx;height: 75rpx;" mode="widthFix"></image>
		</view>
		<view class="flex-1 border-bottom flex align-center">
			<text class="font-md text-dark">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			// 封面
			cover:{
				type:String,
				default:""
			},
			// 标题
			title:{
				type:String,
				default:""
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

生成之后的页面是酱紫的

好了，今天的内容就是这些了，感谢观看。