android点击下拉历史记录,uni-app，社交应用中，聊天页面下拉onPullDownRefresh获取历史消息，数据合并之后，滚动到下拉之前的位置，页面看不见闪动，完美解决...
一般下拉之后，拿到數據合并，會默認展示頂部第一條，模仿其他聊天應用，回到下拉之前位置，如果不做處理，可以看見下拉得到的數據，本方法完美解決
有問題可以留言或者加qq445849201討論，親測ios和android都沒問題
沒有更多消息了
{{item.id}}
{{item.id}}{{item.content}}
export default {
data() {
return {
title: 'Hello',
msgList:[],
listPage:0,
showIndex:-1,
isOver:false
}
},
onLoad() {
let _this = this;
_this.addList(); ?//產生十條消息
},
methods: {
addList(){
let _this = this;
let type = null;
for(let i = 0; i <10;i++){
if(i % 3 == 1){ ? ? ? ? ? ?//消息列表為圖片，增加圖片消息，增加頁面視覺辨識，如果不做處理，在滾動到下拉之前位置時，尤其在低端機上，是可以看見頁面圖片閃一下
type = 'img'?? ??? ? ? //文字消息不是很閃
}else{
type = 'msg' ? ? ? ? ? //消息列表為文字消息 ，view循環渲染中判斷
}
let msgObj={ ? ? ? ? ? ? ? //一條消息對象
id:_this.listPage * 10 +i,
content:'你有一條新的消息,請注意查收',
type:type
}
_this.msgList.unshift(msgObj); ?//插入列表
}
if(_this.listPage == 0){ ? ? ? ? ? ?//首次滾動到底部
_this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 99999,
duration: 0
});
});
return;
}
if(_this.listPage>3){ ? ? ? ? ? ? ? //模擬消息取完了，拿出來40條消息
_this.isOver = true; ?? ??? ??? ?// 標記已無更多消息
_this.endOver(); ? ? ?? ??? ??? ?// 設置禁用下拉加載
return;
}
//最關鍵一步，在數據插入列表，渲染之后，沒有滾動到下拉之前位置時，采用相對定位，設置同背景色遮罩層蓋住消息
//設置為9意思是，每次拿十條數據，遮住前十條，用數組循環下標判斷從0開始，初始化為-1
_this.showIndex = 9;
let scrollMsg = _this.msgList[9]; ?//數據合并之后，獲取10條消息的元素
_this.$nextTick(function() {
let view = uni.createSelectorQuery().select('#msg'+scrollMsg.id);
view.boundingClientRect(res => {
console.log('#msg'+scrollMsg.id+'距離頂部'+res.top); //獲取10條消息的元素距頂部的距離，這就是需要滾動的距離
uni.pageScrollTo({ ? ? ? ? //回到下拉之前，多展示一條消息
scrollTop: res.top,
duration: 0
});
_this.showIndex = -1; ? ? ?//去掉遮罩層
uni.stopPullDownRefresh(); //結束下拉加載
}).exec();
});
},
endOver(){ ?//設置禁用下拉加載
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
currentWebview.setStyle({
pullToRefresh: {
support: false,
style: plus.os.name === 'Android' ? 'circle' : 'default'
}
});
console.log('沒有更多數據了，禁用');
},
},
onPullDownRefresh() { ?//下拉加載
let _this = this;
console.log('refresh');
_this.listPage ++;
_this.addList();
}
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30rpx;
background-color: #FFFFFF;
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 30rpx 0;
}
.text-area {
display: flex;
justify-content: center;
}
.pull-content{
position: relative;
width: 100%;
display: flex;
align-items: center;
margin: 30rpx 0;
}
.left-msg{
width: 300rpx;
border-radius: 10rpx;
background-color: #9eea6b;
color: #333;
font-size: 30rpx;
padding:20rpx;
}
.msg-right{
justify-content: flex-end;
}
.img-box{
display: flex;
align-items: center;
font-size: 28rpx;
}
.absolute-view{
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.show-index{
display: none;
}
.msg-over{
font-size: 24rpx;
text-align: center;
color: #999999;
}
總結
以上是生活随笔為你收集整理的android点击下拉历史记录,uni-app，社交应用中，聊天页面下拉onPullDownRefresh获取历史消息，数据合并之后，滚动到下拉之前的位置，页面看不见闪动，完美解决...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 成都大熊猫基地能摸大熊猫吗
- 下一篇： android webdav客户端,We