【uniapp-scrollView滚动到底部+滚动到顶部加载更多】
2023-12-18 12:56:57
<scroll-view @scroll="scrollPosition" :style="{height:scrollViewHeight+'rpx'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" >
<uni-load-more :status="discussionStatus" v-show="isMore"></uni-load-more>
<view id="scroll-view" v-show="weChatList.length">
<view v-for="item in weChatList" :key="item.uid">
<!-- 我发送的 -->
<view class="send-message-content" v-if="userId==item.uid">
<view class="receive-message-item">
<view class="receive-message-item flex align-items justify-end">
<view class="receive-content mineRecive">
<view class="send-user-name">{{item.user_nickname}}</view>
<view class="send-content">{{item.content}}</view>
</view>
<view class="receive-photo"><image :src="item.avatar"
alt="用户头像"></image></view>
</view>
</view>
</view>
<!-- 接收的消息 -->
<view class="receive-message-content" v-else>
<view class="receive-message-item flex align-items">
<view class="receive-photo"><image :src="item.avatar"
alt="用户头像"></image></view>
<view class="receive-content" style="display: flex;flex-direction: column;align-items: flex-start;">
<view class="user-name">{{item.user_nickname}}</view>
<view class="user-content">{{item.content}}</view>
</view>
</view>
</view>
</view>
</view>
<uni-load-more status="暂无聊天" v-show="!weChatList.length"></uni-load-more>
</scroll-view>
#scroll-view-content{
height: 300rpx!important;
overflow: scroll;
max-height: 300rpx!important;
}
data(){
scrollTop:0,//滚动条位置
scrollViewHeight:300,//滚动视图的高度
},
methods:{
// 讨论区滚动事件
scrollPosition(e){
if(e.detail.scrollTop<10){
this.isMore = true
if(this.discussionPage<this.discussionTotall){
this.discussionPage += 1;
this.discussionFn();//调用新数据
this.discussionStatus = 'loading';
}else{
this.discussionStatus = '暂无更多';
}
}
},
// 加载更多数据
discussionFn(){
let params = {
courseid:this.courseid,
page:this.discussionPage
}
discussList(params).then((res)=>{
let {code, numpage, list} = res
if(code==0){
this.isMore = false
this.discussionStatus = ''
}
})
},
// 滚动到底部
initContentHeight() {
uni.createSelectorQuery()
.in(this)
.select('#scroll-view')
.boundingClientRect(data => {
if (data) {
let top = Number(data.height)
if (top > 0) {
this.scrollTop = top;
}
}
})
.exec();
},
// 发送
websocketsend(){
this.$nextTick(()=>{
tihs.initContentHeight()
})
}
}
文章来源:https://blog.csdn.net/weixin_47416539/article/details/135058713
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!