uni-app 9.1聊天信息设置页（一）_uniapp 聊天列表

聊天页面chat-set.nvue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar>
		<view class="flex flex-wrap py-3 bg-white">
			<view v-for="i in 10" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<free-avatar src="/static/images/demo/demo6.jpg" size="110"></free-avatar>
				<text class="font text-muted mt-1" >昵称</text>
			</view>
			
			<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<view class="flex align-center justify-center border" hover-class="bg-light" style="width: 120rpx;height: 120rpx;">
					<text class="text-light-muted" style="font-size: 100rpx;">+</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	export default {
		components:{
			freeNavBar,
			freeAvatar
		},
		data() {
			return {
				
			}
		},
		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

其中所用到的插件 free-nav-bar.vue free-avatar.vue

free-nav-bar.vue

<template>
	<view>
		<view :class="getClass">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px;'"></view>
			<!-- 导航 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button>
					<!-- 标题 -->
					<text v-if="title" class="font-md ml-3" >{{getTitle}}</text>
				</view>
				<!-- 右边 -->
				<view class="flex align-center" v-if="showRight">
					<slot name="right">
						<free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
						<free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
					</slot>
				</view>
				<!--\ue6e3 \ue682 -->
			</view>
		</view>

		<!-- 站位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
		
		<!-- 扩展菜单  -->
		<free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" style="width:320rpx;height: 525rpx;">
					<view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)">
						<text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text>
						<text class="font-md text-white">{{item.name}}</text>
					</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeIconButton from './free-icon-button.vue';
	import freePopup from './free-popup.vue';
	export default {
		components: {
			freeIconButton,
			freePopup
		},
		props: {
			showBack:{
				type:Boolean,
				default:false
			},
			title: {
				type: String,
				default: ''
			},
			fixed:{
				type:Boolean,
				default:false
			},
			noreadnum:{
				type:Number,
				default:0
			},
			bgColor:{
				type:String,
				default:"bg-light"
			},
			showRight:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				menus:[
					{
						name:'发起群聊',
						event:"",
						icon:"\ue633"
					},
					{
						name:'添加好友',
						event:"",
						icon:"\ue65d"
					},
					{
						name:'扫一扫',
						event:"",
						icon:"\ue614"
					},
					{
						name:'收付款',
						event:"",
						icon:"\ue66c"
					},
					{
						name:'帮助与反馈',
						event:"",
						icon:"\ue61c"
					}
				],
			}
		},
		mounted() {
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`;
			},
			getTitle(){
				let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';
				return this.title + noreadnum;
			},
			getClass(){
				let fixed = this.fixed?"fixed-top":"";
				return `${fixed} ${this.bgColor}`;
			}
		},
		methods:{
			openExtend(){
				this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150));
			},
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

free-avatar.vue

<template>
	<image :src="src" mode="widthFix" :style="getStyle" :class="type"></image>
</template>

<script>
	export default{
		props:{
			size:{
				type:[String,Number],
				default:90
			},
			src:{
				type:String,
				default:""
			},
			type:{
				type:String,
				default:"rounded"
			}
		},
		computed:{
			getStyle(){
				return `width: ${this.size}rpx;height: ${this.size}rpx;`;
			}
		}
	}
</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

页面如下图所示

感谢大家观看，我们下期见。