uniapp scroll-view scroll-top 设置不生效的解决办法
简直折磨人,搜了大半早上的文档,也没看出来什么眉目,看了好多博客,都没啥实质性的用处,不说了,直接贴代码
<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; // 这是重点
}
},
});
}
愿世间所有的美好都会降临到每个人的身边

浙公网安备 33010602011771号