插件市场下载实例
https://ext.dcloud.net.cn/plugin?id=1841
Dcloud插件市场下载源码
有问题可以留言或者加qq445849201讨论,亲测ios和android都没问题
<template>
<view class="container">
<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower" :scroll-top="scrollTop"
@scroll="scroll" scroll-with-animation>
<view>
<view v-for="(item,index) in list" :key="index" class="scroll-item">
<image src="/static/logo.png" class="avatar"></image>
<view class="msg">{{item.msg}}{{index}}</view>
</view>
</view>
</scroll-view>
<button @click="unshift">添加消息</button>
</view>
</template>
<script>
let msgList = Array.from({
length: 15
}, () => {
return {
msg: '这是一条消息'
}
})
export default {
data() {
return {
old: {
scrollTop: 0
},
scrollTop: 0,
list: msgList
}
},
onLoad() {
},
methods: {
//先将其整体翻转180deg,然后将循环的消息翻转180deg(一个view包一条消息),这样就是正常页面了
//@scroll的方法,回到最新,消息发送或者接收到时使用goTop()
scroll(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
},
// 触底加载,翻转了那么底就是顶
scrolltolower() {
//当消息超过一屏 下拉就触发
this.list = msgList.concat(this.list)
},
//来新消息,用 unshift 插入数组
unshift() {
this.list.unshift({
msg: '这是一条消息'
})
this.goTop()
}
}
}
</script>
<style>
.container {
min-height: calc(100vh - 60rpx);
padding: 30rpx;
background-color: #f1f1f1;
}
.scroll-view {
max-height: calc(100vh - 88rpx);
position: relative;
z-index: 3;
transform: rotate(180deg);
}
.scroll-item {
transform: rotate(180deg);
margin-top: 30rpx;
display: flex;
align-items: center;
}
.avatar {
width: 68rpx;
height: 68rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
.msg {
padding: 18rpx 20rpx;
border-radius: 4rpx;
background-color: #fff;
font-size: 28rpx;
color: #333;
}
/* h5 隐藏 滚动条,否则滚动条在左边*/
/deep/ ::-webkit-scrollbar {
width: 0px !important;
height: 0 !important;
display: none;
}
</style>