<template> <div class="comment-scroll-view"> <div class="header"> <div class="back" @click="handleBack"> <i class="iconfont icon-left"></i> </div> {{ count }}评论 </div> <Scroll class="scroll-wrapper" ref="scroll" :options="scrollOptions"> <div v-for="i in list" class="item">huangtao {{i}}</div> </Scroll> <div class="footer"> <div class="input">评论</div> </div> </div> </template> <script> import {Scroll} from 'cube-ui'; export default { name: 'CommentScrollView', components: { Scroll }, data() { return { list: [], scrollOptions: { bounce: false } }; }, computed: { count() { return this.list.length > 0 ? this.list.length + '条' : ''; } }, methods: { click() { this.$nextTick(() => { this.initData(); this.forceUpdate(); }, 1000); }, forceUpdate() { this.$refs.scroll.forceUpdate(); }, initData() { console.log('click') for (let i = 0; i < 100; i++) { this.list.push(i); } }, handleBack() { this.$emit('on-back'); } } }; </script> <style lang="scss" scoped> .comment-scroll-view { display: flex; flex-direction: column; width: 100%; height: 100%; } .header { position: relative; width: 100%; height: 88px; border-bottom: 2px solid #e0e0e0; text-align: center; line-height: 88px; font-size: 32px; } .iconfont { height: 100%; font-size: 20PX; display: flex; align-items: center; justify-content: center; padding-left: 10PX; padding-right: 10PX; } .back { position: absolute; width: 100px; padding-left: 5PX; } .scroll-wrapper { flex: 1; } .item { background-color: white; } .footer { width: 100%; height: 100px; border-top: 2px solid #e0e0e0; display: flex; justify-content: center; align-items: center; } .input { width: 690px; height: 72px; background-color: #f0f0f0; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 24px; color: #b0b0b0; padding: 18px 0 18px 22px; } </style>