hlm_pl_mall_h5/pages/member/live/child/chatroom.vue

<template>
    <cover-view class="div chatroom-scoll">
        <cover-view class="div content">
          <cover-view v-for="item in message" :key="item.id" class="div line">
            <message-item :item="item" id="item.id"></message-item>
            <cover-view class="line-content"></cover-view>
          </cover-view>  
        </cover-view>
    </cover-view>
</template>

<script>
import messageItem from './message-item'
export default {
  props: {
    message: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      viewID: ''
    }
  },
  methods: {

  },
  watch: {
    message: function (nexto, preo) {
      if (nexto.length) {
        const last = nexto[nexto.length - 1]
        this.viewID = last.id
        // 限制展示在页面上的消息条数
      }
    }
  },
  components: {
    messageItem
  },
  computed: {},
  created () {}
}
</script>

<style lang="scss" scoped>
    .chatroom-scoll {
        /*  #ifndef  APP-PLUS-NVUE  */
        max-height: 30vh;
        widows: 100%;
        /*  #endif  */
    }
    .content{
        position: absolute;
        bottom: 0;
    }
    .line{
      /*  #ifndef  APP-PLUS-NVUE  */
      display: flex;
      /*  #endif  */
      flex-direction: row;
    }
    .line-content{
      flex:1
    }
</style>