<template> <div class="comment-scroll-view"> <div class="header"> <div class="back" @click="handleBack"> <i class="iconfont icon-left"></i> </div> {{ count > 0 ? count + '条' : '' }}评论 </div> <CommentList class="scroll-wrapper" :dest-id="destId" :column-type="1001" @on-page-change="onPageChange" v-if="destId"></CommentList> </div> </template> <script> import {Scroll} from 'cube-ui'; export default { name: 'CommentScrollView', props: { destId: { type: [Number, String], default() { return 0; } } }, components: { Scroll }, data() { return { list: [], scrollOptions: { bounce: false }, count: 0 }; }, methods: { handleBack() { this.$emit('on-back'); }, onPageChange({size}) { this.count = size; } } }; </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>