评论l列表组件封装

src/components/livedModel/livedControls.vue

@@ -2,6 +2,8 @@
     <div class="livedControls">
       <!-- 公告层 -->
       <livedAnnouncement></livedAnnouncement>
+      <!-- 评论层 -->
+      <livedIsMsg></livedIsMsg>
       <!-- 底部控制层 -->
       <div class="control flex">
         <div class="goodsImg">
@@ -24,13 +26,15 @@
 
 <script type="text/ecmascript-6">
 import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
+import livedIsMsg from "@/components/livedModel/livedIsMsg";
 export default {
     name: "",
     data() {
         return {}
     },
     components: {
-      livedAnnouncement
+      livedAnnouncement,
+      livedIsMsg
     },
     computed: {},
     created() {},

src/components/livedModel/livedComment.vue → src/components/livedModel/livedExplainGoods.vue

 <template>
-    <div class="livedComment">
+  <!-- 讲解商品模块 -->
+  <div class="livedExplainGoods">
     
   </div>
 </template>
@@ -8,15 +9,17 @@
 export default {
   name: "",
   data() {
-        return {}
+    return {};
   },
   components: {},
   computed: {},
   created() {},
   mounted() {},
   methods: {}
-}
+};
 </script>
 
 <style lang="scss" scoped>
+.livedExplainGoods {
+}
 </style>

src/components/livedModel/livedIsMsg.vue

+<template>
+  <!-- 评论模块 -->
+  <div class="livedIsMsg">
+    <div class="list">
+      <scroll-view :style="{'height': '24vh','width':'52vw;'}" :scroll-y="true" :scroll-top="scrollTop"  @scrolltolower="scrolltolower">
+        <div class="item flex" v-for="(item,index) in list" :key="index">
+          <div class="user">
+            <p class="live"></p>
+            <div class="name">
+              <span class="user">用户{{index}}：</span><span class="test">{{item.val}}</span>
+            </div>
+          </div>
+        </div>
+      </scroll-view>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "",
+  data() {
+    return {
+      list: [
+        {
+          val: "测试测试测试测"
+        },
+        {
+          val: "评论了直播"
+        },
+        {
+          val: "测试测试测试测评论了直播"
+        },
+        {
+          val: "测试测试测评论了直播试测试"
+        },
+        {
+          val: "测试测试测试测试测试测试"
+        },
+        {
+          val: "测试测试测试测试测试测试"
+        }
+      ],
+      scrollTop:0,
+    };
+  },
+  components: {},
+  computed: {},
+  created() {},
+  onLoad(){
+    setInterval(() => {
+      this.list.push({
+        val:'测试'+Math.random(),
+      })
+      this.scrollTop=this.list.length*1000;
+    }, 2000);
+  },
+  mounted() {},
+  methods: {
+    scrolltolower(){
+      
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 一行否则出现省略号 */
+.line-clamp1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.livedIsMsg {
+  margin-left: 12px;
+  padding: 8px;
+  margin-bottom: 10px;
+  position: relative;
+  .list {
+    width: 50vw;
+    max-height: 24vh;
+    overflow: hidden;
+    bottom: 0;
+    .item {
+      width: 50vw;
+      padding: 4px 0;
+      display: flex;
+      align-items: flex-start;
+      .user {
+        .name {
+          color: #f9a93c;
+          font-size: 14px;
+        }
+      }
+      .test {
+        font-size: 14px;
+        color: #f1f1f1;
+        word-break: break-all;
+      }
+    }
+  }
+}
+</style>