livedIsMsg.vue

<template>
  <!-- 评论模块 -->
  <div class="livedIsMsg" v-if="list.length>0" :class="{'livedIsMsgFixed':isSend}" :style="{'bottom':isSend?(fixedHeight+50)+'px':''}">
    <div class="list">
      <scroll-view :style="{'height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"  @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>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import liveApi from "@/api/live";
export default {
  props:["guestBookList","updateVal","isSend","fixedHeight","liveId","info"],
  name: "",
  data() {
    return {
      list: [],
      scrollTop:0,
    };
  },
  watch:{
    updateVal(){
     if(!this.info.playbackUrl || this.info.liveBroadcastState == 1 || this.info.liveBroadcastState == 3){
       console.log('2222222222222')
        this.list=[...this.list,...this.guestBookList];
        this.scrollTop=this.list.length*1000;
     }
     
    }
  },
  components: {},
  computed: {},
  created() {},
  onLoad(){
    if(this.info.playbackUrl && this.info.playbackUrl[0] && (this.info.liveBroadcastState != 1 || this.info.liveBroadcastState != 3)){
      this.init()
    }
    
  },
  mounted() {},
  methods: {
    scrolltolower(){
      
    },
    init(){
      let query = {
        id : this.liveId,
        userActivebeginTime : 1,
        beginTime : 1
      }
      liveApi.queryPlaybackComments(query).then(res => {
        if(res.data.code == '200'){
          this.list= res.data.data.guestBookList.slice(-100);
          this.scrollTop=this.list.length*1000;
        }
      })
    }
  }
};
</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;
  width: 60vw;
  .list {
    width: 50vw;
    overflow: hidden;
    bottom: 0;
    padding-left: 10px;
    border-radius: 9px;
    .item {
      width: 50vw;
      border-radius: 9px;
      margin-bottom: 4px;
      .user {
        max-width: 50vw;
        padding: 4px 8px;
        display: inline-block;
        line-height: 18px;
        border-radius: 9px;
        background-color: rgba(0,0,0,0.3);
        box-sizing: border-box;
        .name {
          color: #f9a93c;
          font-size: 14px;
        }
      }
      .test {
        font-size: 14px;
        color: #f1f1f1;
        word-break: break-all;
      }
    }
  }
}
.livedIsMsgFixed{
  position: absolute;
  margin: 0;
  left: 12px;
}
</style>