评论列表默认加载10条数据 ，添加上拉加载更多，原理之前已经讲过。
    底部输入框使用fixed定位，当我们在真机上预览的时候，会有个情况，就是当软键盘弹起来的时候，输入框一小部分会被遮挡，解决方案是给input添加cursor-spacing="10"属性即可。值可根据需求调整。

    2. <template>
    3.   <view class="container comment">
    4.     <v-comment :list="commentList"></v-comment>
    5.     <!-- 加载更多 -->
    6.     <view class="load_more">
    7.       <uni-load-more :status="status" />
    8.     </view>
    10.     <view class="comment_bar">
    11.       <input
    12.         class="input_box"
    13.         placeholder="请点击输入"
    14.         cursor-spacing="10"
    15.         v-model="content"
    16.         @confirm="handleComment"
    17.         @focus="handleFocus"
    18.         @blur="handleBlur"
    19.         @input="handleInput"
    20.         />
    21.         <uni-icons
    22.           @click="handleComment"
    23.           class="input_icon"
    24.           type="paperplane-filled"
    25.           size="20"
    26.           />
    27.         </view>
    28.   </view>
    29. </template>
    31. <script>
    32.   import userService from "@/services/user";
    33.   export default {
    34.     data() {
    35.       return {
    36.         commentList: [],
    37.         params: {
    38.           page: 1,
    39.           limit: 10,
    40.         },
    41.         options: {},
    42.         status: "more",
    43.         content: "",
    44.         isInput: false,
    45.       };
    46.     },
    47.     onLoad(option) {
    48.       this.options = option;
    49.       this.getCommentList();
    50.     },
    51.     // 监听滚动事件最外层view不能添加css样式overflow：scroll
    52.     onReachBottom() {
    53.       if (this.status !== "noMore") {
    54.         this.status = "loading";
    55.         this.params.page++;
    56.         this.getCommentList();
    57.       }
    58.     },
    59.     methods: {
    60.       async getCommentList() {
    61.         try {
    62.           const res = await userService.commentList({
    63.             ...this.params,
    64.             ...this.options,
    65.           });
    66.           const items = res.data.items;
    67.           // 数组解构拼接
    68.           this.commentList = [...this.commentList, ...items];
    69.           if (items.length < 10) return (this.status = "noMore");
    70.           if (items.length >= 10) this.status = "more";
    71.           console.log("res", res);
    72.         } catch (e) {
    73.           console.log("e", e);
    74.         }
    75.       },
    76.       /**
    77.      * @description: 发表评论-判断登陆状态
    78.      * @return {*}
    79.      */
    80.       async commentAdd() {
    81.         try {
    82.           const res = await userService.commentAdd({
    83.             data: {
    84.               content: this.content,
    85.               ...this.options,
    86.             },
    87.           });
    89.           if (res.message == "成功") {
    90.             uni.showToast({
    91.               title: "评论发送成功",
    92.             });
    93.             this.content = "";
    94.             this.params.page = 1;
    95.             this.commentList = [];
    96.             this.getCommentList();
    97.           } else {
    98.             uni.showToast({
    99.               title: "评论发送失败",
    100.               icon: "error",
    101.             });
    102.           }
    103.         } catch (e) {
    104.           console.log("e", e);
    105.         }
    106.       },
    107.       handleComment() {
    108.         this.$store.dispatch("goLogin", () => {
    109.           this.commentAdd();
    110.         });
    111.       },
    112.       handleFocus() {
    113.         this.isInput = true;
    114.       },
    115.       handleBlur() {
    116.         this.isInput = false;
    117.       },
    118.       handleInput() {
    119.         this.isInput = true;
    120.       },
    121.     },
    122.   };
    123. </script>
    125. <style lang="scss" scoped>
    126.   @import url("@/static/styles/_global.scss");
    127.   .comment {
    128.     background: white;
    129.     padding: 16px 16px 50px 16px;
    130.     height: 100%;
    131.     .comment_bar {
    132.       position: fixed;
    133.       bottom: 0;
    134.       left: 0;
    135.       width: 100%;
    136.       z-index: 999;
    137.       height: 60px;
    138.       display: flex;
    139.       align-items: center;
    140.       justify-content: center;
    141.       background: linear-gradient(
    142.         180deg,
    143.         hsla(0, 0%, 86.7%, 0) 0,
    144.         hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
    145.         hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
    146.         #fff 0.64286rem,
    147.         #fff
    148.       );
    150.       .input_box {
    151.         width: 80%;
    152.         height: 30px;
    153.         line-height: 30px;
    154.         background-color: #f2f3f7;
    155.         border-radius: 20px;
    156.         // text-indent: 10px;
    157.         padding-left: 10px;
    158.         font-size: 16px;
    159.       }
    160.       .input_icon {
    161.           margin-left: 8px;
    162.       }
    163.     }
    164.   }
    165. </style>