# 完善聊天页功能
<template>
<view class="chat">
<scroll-view scroll-y id="scollview" :scroll-top="scrollTop" :scroll-with-animation="true" :style="{height:style.contentH + 'px'}"
>
<!-- 聊天列表 -->
<block v-for="(item, index) in list" :key="index">
<userChatList :item="item" :index="index"></userChatList>
</block>
</scroll-view>
<!-- 输入框 -->
<userChatBottom @submit="submit"></userChatBottom>
</view>
</template>
<script>
import userChatBottom from '../../components/user-chat/user-chat-bottom.vue'
import userChatList from '../../components/user-chat/user-chat-list.vue'
import time from '../../common/time.js'
export default {
components: {
userChatBottom,
userChatList
},
data() {
return {
scrollTop: 0,
list: [],
style: {
contentH: 0,
itemH: 0
}
}
},
onLoad() {
this.getData()
this.initData()
},
onReady() {
this.pageToBottom()
},
methods: {
// 初始化参数
initData() {
try {
const res = uni.getSystemInfoSync();
this.style.contentH = res.windowHeight - uni.upx2px(120)
} catch (e) {
// error
}
},
pageToBottom() {
// 获取节点信息, 计算内容高度, 自动滑动到底部
let q = uni.createSelectorQuery()
q.select('#scollview').boundingClientRect()
q.selectAll('.user-chat-item').boundingClientRect()
q.exec((res) => {
res[1].forEach((ret) => {
this.style.itemH += ret.height
})
if (this.style.itemH > this.style.contentH) {
this.scrollTop = this.style.itemH
}
})
},
// 获取数据
getData() {
let arr = [{
isme: false,
userpic: '../../static/demo/userpic/6.jpg',
type: 'text',
data: '哈哈哈',
time: '1589279133'
},
{
isme: true,
userpic: '../../static/demo/userpic/10.jpg',
type: 'img',
data: '../../static/demo/1.jpg',
time: '1589279133',
},
{
isme: false,
userpic: '../../static/demo/userpic/6.jpg',
type: 'text',
data: '哈哈哈',
time: '1589279133'
},
{
isme: true,
userpic: '../../static/demo/userpic/10.jpg',
type: 'img',
data: '../../static/demo/1.jpg',
time: '1589279133',
},
{
isme: false,
userpic: '../../static/demo/userpic/6.jpg',
type: 'text',
data: '哈哈哈',
time: '1589279133'
},
{
isme: true,
userpic: '../../static/demo/userpic/10.jpg',
type: 'img',
data: '../../static/demo/1.jpg',
time: '1589279133',
},
{
isme: true,
userpic: '../../static/demo/userpic/10.jpg',
type: 'img',
data: '../../static/demo/1.jpg',
time: '1589279133',
},
]
for (let i = 0; i < arr.length; i++) {
arr[i].gstime = time.gettime.getChatTime(arr[i].time, i > 0 ? arr[i - 1].time : 0)
}
this.list = arr
},
submit(data) {
// 发送的逻辑
let now = new Date().getTime()
let obj = {
isme: true,
userpic: '../../static/demo/userpic/10.jpg',
type: 'text',
data: data,
time: now,
// 比较两次时间是否大于300s
gstime: time.gettime.getChatTime(now, this.list[this.list.length - 1].time)
}
this.list.push(obj)
this.pageToBottom()
}
}
}
</script>
<style lang="less" scoped>
.chat {
padding: 0 20rpx;
}
</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
146
147
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
146
147
← 聊天列表组件开发 搜索列表功能完善(上) →