Android/iOS都不行。
这里出现了问题, query.exec(function(res) {
// console.log(res);
// console.log($this.pageHeight);
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
this.OriginalHeight = res[0].height;
$this.pageHeight = systemInfo.windowHeight - res[0].height;
});
<template>
<view class="chat">
<view class="chat-scroll" :style="{'height':pageHeight+'px'}" @click.stop="showChatInput">
<scroll-view
id="scrollview"
:style="{'height':pageHeight+'px'}"
scroll-y="true"
:scroll-top="scrollTopVal"
:class="{'showchatB':chatB==='bottomTop'}">
<text class="moneyMark">请您注意保护您的财产安全,不要随意转账、汇款、发送验证码给别人</text>
<block v-for="(item,index) in chatItems" :key="index" v-if="chatItems.length>0" @click="hideChatInput">
<chat-time :time="item.data.createTime"></chat-time>
<chat-show :item="item.data" :avatar="avatar"></chat-show>
</block>
</scroll-view>
</view>
<chat-input @closeBottom="$_bottomTop" :showChatInputBut="showChatInputBut" :avatar="avatar" :nick="nick"></chat-input>
</view>
</template>
<script>
import UI from '../../common/js/msg-type/ui.js';
import { dealChatTime } from '../../common/js/DateTime.js';
import AppIMDelegate from '../../common/js/delegate/app-im-delegate';
import IMOperator from '../../common/js/msg-type/im-operator.js';
import MsgManager from '../../common/js/msg-type/msg-manager.js';
import ChatShow from '../../components/HandComponent/ChatShow.vue';
import ChatTime from '../../components/HandComponent/ChatTime.vue';
import ChatInput from '../../components/HandComponent/ChatInput.vue';
import as API from '../../common/js/api.js';
import { objKeySort } from '../../common/js/sort.js';
export default {
components: {
ChatInput,
ChatShow,
ChatTime
},
data() {
return {
chatItems: [],
chatB: 'bottomBot',
avatar: '',
pageHeight: 0,
showChatInputBut: 0,
OriginalHeight: 0,
runPost: null,
nick: ''
};
},
onShareAppMessage() {
return {
path: '/pages/FirstPage/FirstBar'
};
},
computed: {
scrollTopVal() {
return this.chatItems.length 999;
}
},
methods: {
showChatInput() {
let systemInfo = uni.getSystemInfoSync();
this.pageHeight = systemInfo.windowHeight - this.OriginalHeight;
this.showChatInputBut++;
},
onSimulateSendMsg({ content, success, fail }) {
//这里content即为要发送的数据
//这里的content是一个对象了,不再是一个JSON格式的字符串。这样可以在发送消息的底层统一处理。
this.appIMDelegate.getIMHandlerDelegate().sendMsg({
content,
success: content => {
//这个content格式一样,也是一个对象
const item = this.imOperator.createNormalChatItem(content);
// console.log(item.data + '我是发送的消息');
success && success(item);
},
fail
});
},
// 发送消息
sendMsg({ content, itemIndex, success }) {
// console.log(content);
this.onSimulateSendMsg({
content,
success: msg => {
let $this = this;
let newsnewsMessages = $this.$store.getters.gettersBeforeMessage;
let index = 0;
let newtoken = uni.getStorageSync('apptoken');
if (newsnewsMessages.length !== 0) {
for (let i in newsnewsMessages) {
if (parseFloat(msg.data.to) === parseFloat(newsnewsMessages[i].id)) {
index++;
}
}
if (index == 0) {
// 就证明没有一样的
let data = {};
data['id'] = msg.data.to;
data['appId'] = API.appId;
data['sign'] = objKeySort(data);
uni.request({
url: API.baseUrl + '/userinfo/queryUser',
method: 'POST',
data: data,
header: {
'Content-Type':
'application/x-www-form-urlencoded; charset=UTF-8',
Authorization: newtoken
},
success(data) {
if (data.data.ret == 0) {
uni.setStorageSync('apptoken', res.header.Authorization||res.header.authorization);
uni.setStorageSync('appexpireTime', res.header.ExpireTime||res.header.expireTime);
let newObject = {};
newObject['avatar'] = data.data.data.portrait;
newObject['nick'] = data.data.data.username;
newObject['id'] = data.data.data.id;
newObject['terminal'] = '';
newObject['lastSessionTime'] = new Date(
data.data.data.lastloginDate
).getTime();
newObject['userOfflineMessages'] = [];
newObject['userUnReadMessages'] = [];
newsnewsMessages.push(newObject);
$this.$store.dispatch('getBeforeMessage', newsnewsMessages);
}
}
});
}
} else {
let data = {};
data['id'] = msg.data.to;
data['appId'] = API.appId;
data['sign'] = objKeySort(data);
uni.request({
url: API.baseUrl + '/userinfo/queryUser',
method: 'POST',
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
Authorization: newtoken
},
success(data) {
if (data.data.ret == 0) {
uni.setStorageSync('apptoken', res.header.Authorization||res.header.authorization);
uni.setStorageSync('appexpireTime', res.header.ExpireTime||res.header.expireTime);
let newObject = {};
newObject['avatar'] = data.data.data.portrait;
newObject['nick'] = data.data.data.username;
newObject['id'] = data.data.data.id;
newObject['terminal'] = '';
newObject['lastSessionTime'] = new Date(
data.data.data.lastloginDate
).getTime();
newObject['userOfflineMessages'] = [];
newObject['userUnReadMessages'] = [];
newsnewsMessages.push(newObject);
$this.$store.dispatch('getBeforeMessage', newsnewsMessages);
}
}
});
}
this.UI.updateViewWhenSendSuccess(msg, itemIndex);
success && success(msg);
},
fail: res => {
console.log(res);
this.UI.updateViewWhenSendFailed(itemIndex);
}
});
},
// 上传图片
simulateUploadFile({ savedFilePath, itemIndex, success, fail }) {
// console.log(savedFilePath);
setTimeout(() => {
let urlFromServerWhenUploadSuccess = savedFilePath;
success && success(urlFromServerWhenUploadSuccess);
}, 1000);
},
hideChatInput() {
this.chatB = 'bottomBot';
this.hideChatInput = true;
},
resetTime(time) {
let time_now,
time_current,
cur_day,
int_month,
int_day,
int_hour,
int_minute,
cur_month,
cur_year,
int_year;
time_now = new Date(time);
time_current = new Date();
cur_year = time_current.getFullYear();
int_year = time_now.getFullYear();
cur_month = time_current.getMonth() + 1;
int_month = time_now.getMonth() + 1;
cur_day = time_current.getDate();
int_day = time_now.getDate();
console.log(cur_day, int_day);
int_hour = time_now.getHours();
int_minute = time_now.getMinutes();
if (int_hour < 10) int_hour = '0' + int_hour;
if (int_minute < 10) int_minute = '0' + int_minute;
console.log(cur_year, int_year);
if (cur_year > int_year) {
return (
int_year + '年' + int_month + '月' + int_day + ' ' + int_hour + ':' + int_minute
);
} else if (cur_month > int_month) {
return (
int_year + '年' + int_month + '月' + int_day + ' ' + int_hour + ':' + int_minute
);
} else if (cur_day > int_day) {
return (
int_year + '年' + int_month + '月' + int_day + ' ' + int_hour + ':' + int_minute
);
} else {
return int_hour + ':' + int_minute;
}
},
$_bottomTop(content) {
let val = content.content;
if (content.index === 1) {
let systemInfo = uni.getSystemInfoSync();
let $this = this;
const query = wx.createSelectorQuery();
query.select('.chat-input').boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(function(res) {
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
let smallHeight = res[0].height;
// console.log(smallHeight + '我是隐藏的');
$this.pageHeight = systemInfo.windowHeight - smallHeight / 3.4;
// console.log('打印高度', res[0].height);
// console.log('打印demo的元素的信息', res);
});
} else if (content.index === 2) {
let systemInfo = uni.getSystemInfoSync();
let $this = this;
const query = wx.createSelectorQuery();
query.select('.chat-input').boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(function(res) {
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
let smallHeight = res[0].height;
// console.log(smallHeight + '我是显示的');
$this.pageHeight = systemInfo.windowHeight - smallHeight * 3.4;
// console.log('打印高度', res[0].height);
// console.log('打印demo的元素的信息', res);
});
} else if (content.index === 3) {
this.msgManager.sendMsg({ type: IMOperator.TextType, val });
} else if (content.index === 4) {
this.msgManager.sendMsg({ type: IMOperator.ImageType, val });
}
},
onSimulateReceiveMsg(cbOk) {
uni.showLoading({
title: '加载中...',
mask: true
});
let options;
this.appIMDelegate = new AppIMDelegate(this);
this.appIMDelegate.onShow(options, this.$store.getters.gettersIsLogin);
this.appIMDelegate.getIMHandlerDelegate().sendMsg({
content: {
type: '1',
userId: uni.getStorageSync('appuserId'),
cmd: 19,
fromUserId: uni.getStorageSync('appfromId')
}
});
let $this = this;
this.appIMDelegate.getIMHandlerDelegate().setOnReceiveMessageListener({
listener: msg => {
uni.hideLoading();
if (!msg) {
return;
}
if (msg.data) {
if (msg.command && msg.command === 20) {
for (var key in msg.data.friends) {
var chatDatas = msg.data.friends[key];
for (var index in chatDatas) {
chatDatas[index].isMy =
chatDatas[index].from === uni.getStorageSync('appuserId');
chatDatas[index].createTime = $this.resetTime(
chatDatas[index].createTime
);
}
cbOk && cbOk(chatDatas);
}
} else if (msg.command === 11) {
const currentTimestamp = Date.now();
msg.data.createTime = dealChatTime(
currentTimestamp,
msg.data.createTime
).timeStr;
msg.data.isMy = msg.data.from === uni.getStorageSync('appuserId');
cbOk && cbOk(msg);
}
}
}
});
},
onenterMsg() {
let options;
this.appIMDelegate = new AppIMDelegate(this);
this.appIMDelegate.onShow(options, this.$store.getters.gettersIsLogin);
this.appIMDelegate.getIMHandlerDelegate().sendMsg({
content: {
to: uni.getStorageSync('appfromId'),
cmd: 31,
from: uni.getStorageSync('appuserId'),
sessionMngType: 0
}
});
this.appIMDelegate.getIMHandlerDelegate().setOnReceiveMessageListener({
listener: msg => {}
});
},
onleaveMsg() {
let options;
this.appIMDelegate = new AppIMDelegate(this);
this.appIMDelegate.onShow(options, this.$store.getters.gettersIsLogin);
this.appIMDelegate.getIMHandlerDelegate().sendMsg({
content: {
to: uni.getStorageSync('appfromId'),
cmd: 31,
from: uni.getStorageSync('appuserId'),
sessionMngType: 1
}
});
this.appIMDelegate.getIMHandlerDelegate().setOnReceiveMessageListener({
listener: msg => {}
});
}
},
onLoad(e) {
this.UI = new UI(this);
const friend = JSON.parse(e.friend);
this.avatar = friend.avatar;
this.nick = friend.nick;
uni.setStorageSync('appfromId', friend.id);
uni.setNavigationBarTitle({
title: friend.nick
});
this.imOperator = new IMOperator(this, friend);
this.msgManager = new MsgManager(this);
this.onenterMsg();
this.onSimulateReceiveMsg(msg => {
this.msgManager.showMsg({ msg });
});
let systemInfo = uni.getSystemInfoSync();
const query = uni.createSelectorQuery();
query.select('.chat-input').boundingClientRect();
query.selectViewport().scrollOffset();
let $this = this;
这里出现了问题, query.exec(function(res) {
// console.log(res);
// console.log($this.pageHeight);
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
this.OriginalHeight = res[0].height;
$this.pageHeight = systemInfo.windowHeight - res[0].height;
});
query.exec(function(res) {
// console.log(res);
// console.log($this.pageHeight);
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
this.OriginalHeight = res[0].height;
$this.pageHeight = systemInfo.windowHeight - res[0].height;
});
},
onUnload() {
clearInterval(this.runPost);
this.onleaveMsg();
let newStore = this.$store.getters.gettersBeforeMessage;
newStore.forEach(item => {
if (parseFloat(item.id) === parseFloat(uni.getStorageSync('appfromId'))) {
item.userUnReadMessages = [];
}
});
this.$store.dispatch('getBeforeMessage', newStore);
// console.log(newStore);
}
};
</script>
<style lang="less" scoped>
@import '../../common/css/flex.less';
.chat {
width: 100%;
background-color: #efeff4;
overflow-x: hidden;
.f-fd-c;
padding-bottom: 100upx;
&-scroll {
.f-fd-c;
.scroll-view {
.f-d-f;
.f-fd-c;
padding-bottom: 100upx;
}
.showchatB {
padding-bottom: 340upx;
}
}
.moneyMark {
width: 96%;
margin: 0 auto;
text-align: center;
display: block;
padding: 12upx 0;
}
}
.chat_bottom {
padding-bottom: 340upx;
}
</style>
2 个回复
Trust - 少说废话
HBuilderX 版本
运行环境 Android/iOS
提供下完整的可以重现问题的测试代码
Slienttears (作者) - 90后IT男
Android/iOS都不行。
这里出现了问题, query.exec(function(res) {
// console.log(res);
// console.log($this.pageHeight);
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
this.OriginalHeight = res[0].height;
$this.pageHeight = systemInfo.windowHeight - res[0].height;
});
<template>
<view class="chat">
<view class="chat-scroll" :style="{'height':pageHeight+'px'}" @click.stop="showChatInput">
</template>
<script>
import UI from '../../common/js/msg-type/ui.js';
import { dealChatTime } from '../../common/js/DateTime.js';
import AppIMDelegate from '../../common/js/delegate/app-im-delegate';
import IMOperator from '../../common/js/msg-type/im-operator.js';
import MsgManager from '../../common/js/msg-type/msg-manager.js';
import ChatShow from '../../components/HandComponent/ChatShow.vue';
import ChatTime from '../../components/HandComponent/ChatTime.vue';
import ChatInput from '../../components/HandComponent/ChatInput.vue';
import as API from '../../common/js/api.js';
import { objKeySort } from '../../common/js/sort.js';
export default {
components: {
ChatInput,
ChatShow,
ChatTime
},
data() {
return {
chatItems: [],
chatB: 'bottomBot',
avatar: '',
pageHeight: 0,
showChatInputBut: 0,
OriginalHeight: 0,
runPost: null,
nick: ''
};
},
onShareAppMessage() {
return {
path: '/pages/FirstPage/FirstBar'
};
},
computed: {
scrollTopVal() {
return this.chatItems.length 999;
}
},
methods: {
showChatInput() {
let systemInfo = uni.getSystemInfoSync();
this.pageHeight = systemInfo.windowHeight - this.OriginalHeight;
this.showChatInputBut++;
},
onSimulateSendMsg({ content, success, fail }) {
//这里content即为要发送的数据
//这里的content是一个对象了,不再是一个JSON格式的字符串。这样可以在发送消息的底层统一处理。
this.appIMDelegate.getIMHandlerDelegate().sendMsg({
content,
success: content => {
//这个content格式一样,也是一个对象
const item = this.imOperator.createNormalChatItem(content);
// console.log(item.data + '我是发送的消息');
success && success(item);
},
fail
});
},
// 发送消息
sendMsg({ content, itemIndex, success }) {
// console.log(content);
this.onSimulateSendMsg({
content,
success: msg => {
let $this = this;
let newsnewsMessages = $this.$store.getters.gettersBeforeMessage;
let index = 0;
let newtoken = uni.getStorageSync('apptoken');
if (newsnewsMessages.length !== 0) {
for (let i in newsnewsMessages) {
if (parseFloat(msg.data.to) === parseFloat(newsnewsMessages[i].id)) {
index++;
}
}
if (index == 0) {
// 就证明没有一样的
let data = {};
data['id'] = msg.data.to;
data['appId'] = API.appId;
data['sign'] = objKeySort(data);
uni.request({
url: API.baseUrl + '/userinfo/queryUser',
method: 'POST',
data: data,
header: {
'Content-Type':
'application/x-www-form-urlencoded; charset=UTF-8',
Authorization: newtoken
},
success(data) {
if (data.data.ret == 0) {
uni.setStorageSync('apptoken', res.header.Authorization||res.header.authorization);
uni.setStorageSync('appexpireTime', res.header.ExpireTime||res.header.expireTime);
let newObject = {};
newObject['avatar'] = data.data.data.portrait;
newObject['nick'] = data.data.data.username;
newObject['id'] = data.data.data.id;
newObject['terminal'] = '';
newObject['lastSessionTime'] = new Date(
data.data.data.lastloginDate
).getTime();
newObject['userOfflineMessages'] = [];
newObject['userUnReadMessages'] = [];
newsnewsMessages.push(newObject);
$this.$store.dispatch('getBeforeMessage', newsnewsMessages);
}
}
});
}
} else {
let data = {};
data['id'] = msg.data.to;
data['appId'] = API.appId;
data['sign'] = objKeySort(data);
uni.request({
url: API.baseUrl + '/userinfo/queryUser',
method: 'POST',
data: data,
header: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
Authorization: newtoken
},
success(data) {
if (data.data.ret == 0) {
uni.setStorageSync('apptoken', res.header.Authorization||res.header.authorization);
uni.setStorageSync('appexpireTime', res.header.ExpireTime||res.header.expireTime);
let newObject = {};
newObject['avatar'] = data.data.data.portrait;
newObject['nick'] = data.data.data.username;
newObject['id'] = data.data.data.id;
newObject['terminal'] = '';
newObject['lastSessionTime'] = new Date(
data.data.data.lastloginDate
).getTime();
newObject['userOfflineMessages'] = [];
newObject['userUnReadMessages'] = [];
newsnewsMessages.push(newObject);
$this.$store.dispatch('getBeforeMessage', newsnewsMessages);
}
}
});
}
this.UI.updateViewWhenSendSuccess(msg, itemIndex);
success && success(msg);
},
fail: res => {
console.log(res);
this.UI.updateViewWhenSendFailed(itemIndex);
}
});
},
// 上传图片
simulateUploadFile({ savedFilePath, itemIndex, success, fail }) {
// console.log(savedFilePath);
setTimeout(() => {
let urlFromServerWhenUploadSuccess = savedFilePath;
success && success(urlFromServerWhenUploadSuccess);
}, 1000);
},
这里出现了问题, query.exec(function(res) {
// console.log(res);
// console.log($this.pageHeight);
res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
this.OriginalHeight = res[0].height;
$this.pageHeight = systemInfo.windowHeight - res[0].height;
});
};
</script>
<style lang="less" scoped>
@import '../../common/css/flex.less';
.chat {
width: 100%;
background-color: #efeff4;
overflow-x: hidden;
.f-fd-c;
padding-bottom: 100upx;
&-scroll {
.f-fd-c;
.scroll-view {
.f-d-f;
.f-fd-c;
padding-bottom: 100upx;
}
.showchatB {
padding-bottom: 340upx;
}
}
.moneyMark {
width: 96%;
margin: 0 auto;
text-align: center;
display: block;
padding: 12upx 0;
}
}
.chat_bottom {
padding-bottom: 340upx;
}
</style>