简直折磨人,搜了大半早上的文档,也没看出来什么眉目,看了好多博客,都没啥实质性的用处,不说了,直接贴代码
<template>
<view>
<!-- scroll-with-animation="true" 这句话也尽量给加上 -->
<scroll-view scroll-y="true" class="msg-list" :style="{ height: clientHeight + 'px' }" scroll-with-animation="true" :scroll-top="scrollTopVal" @scroll="viewScroll"> <view v-for="msg in msgList.data" :key="msg.id"> <text class="msg-time">{{ msg.send_dt }}</text> <view v-if="msg.type == 1"> <view class="msg-content" :class="{ 'user-msg': msg.role !== 'admin' }" > <image class="head-img" :src="msg.avatar ? msg.avatar : '../../static/images/ico_userheadimg.png'" mode="aspectFill"></image> <text class="msg-text-content" :class="{ 'user-text-content': msg.role !== 'admin' }" >{{ msg.msg }}</text> </view> </view> <view v-if="msg.type == 2"> <view class="msg-content" :class="{ 'user-msg': msg.role !== 'admin' }" > <image class="head-img" :src="msg.avatar ? msg.avatar : '../../static/images/ico_userheadimg.png'" mode="aspectFill"></image> <image class="msg-pic" :class="{ 'msg-user-pic': msg.role !== 'admin' }" @tap="previewImage" :src="msg.msg" mode="aspectFill" ></image> </view> </view> </view> </scroll-view>
</view>
</template> <script>
data() {
return {
clientHeight: 0,
scrollTopVal: 900,
msgList: {data: []}
}
}
</script> getList(refresh) { const _this = this; let activeTab = this.msgList; if (activeTab.isLoading) { return; } if (refresh) { activeTab.nextStart = 0; } activeTab.isLoading = true; httpUtils.requestWithGet({ url: 'xxx', data: { start: activeTab.nextStart }, success: result => { console.log(result); const data = result.data; if (data.notice_list != undefined) { if (refresh) { activeTab.data = data.notice_list.reverse(); } else { activeTab.data = data.notice_list.reverse().concat(activeTab.data); console.log(data.notice_list); console.log(activeTab.data); } activeTab.nextStart = data.next_start; _this.scrollTopVal = _this.scrollTopVal + _this.clientHeight; // 这是重点 } }, }); }