如何让 v-for 额外渲染的数据往下显示? 目前这一段代码,当数据超过一屏后,点击 Show More,新的内容会把原来的内容往上撑,而不是往下

2020 年 10 月 5 日
 loveuloveme
<div id="ttt" style="padding-bottom:100px;border: 1px solid green">
        <div v-for="(comment, index) in comments">
            <div>
                <p v-text="comment"></p>
            </div>

        </div>
        <button class="btn" @click="showMore">
            Show More
        </button>
    </div>

<script>
    new Vue({
        el: '#ttt',
        data: {
            comments: ['tom', 'jack' ,'lily'],
        },
        methods: {
            showMore() {
                        this.comments = this.comments.concat(['mary', 'jessica'])
                    }
        },
    });
    </script>
918 次点击
所在节点    问与答
1 条回复
IvanLi127
2020 年 10 月 5 日
插入前记下滚动条位置,插完后滚立马回来。 css 有一个属性能控制,overflow-anchor 。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/712624

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX