Slienttears
Slienttears
  • 发布:2019-04-10 15:36
  • 更新:2019-04-11 09:42
  • 阅读:812

query,exex的问题

分类:uni-app

在小程序里面是能获取到高度的,但是在APP里面获取不到高度

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;
});

res[0].top; // #the-id节点的上边界坐标
res[1].scrollTop; // 显示区域的竖直滚动位置
在小程序里面能获取到,但是在APP里面报了错 Cannot read property 'top' of null

2019-04-10 15:36 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

HBuilderX 版本
运行环境 Android/iOS
提供下完整的可以重现问题的测试代码

Slienttears

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">

        <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>

该问题目前已经被锁定, 无法添加新回复