uni-app，社交应用中，scroll-view 下拉加载历史消息,页面不闪

插件市场下载实例

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>