一般下拉之后，拿到数据合并，会默认展示顶部第一条，模仿其他聊天应用，回到下拉之前位置，如果不做处理，可以看见下拉得到的数据，本方法完美解决

有问题可以留言或者加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;

}