vue实现评论滚动效果

vue插件实现滚动效果

一、安装组件

官网地址：https://chenxuan0000.github.io/vue-seamless-scroll/

1、vue2安装

npm install vue-seamless-scroll --save

vue3安装

npm install vue3-seamless-scroll --save

二、组件引入

<template>
  <div v-if="flagList">
    <vue-seamless-scroll :data="barrageList" class="warp">
      <ul class="item">
        <li v-for="(item, index) in barrageList" :key="index">
          <span class="msg" v-text="item.msg"></span>
          <span class="avatar" v-text="item.avatar"></span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: 'Example01Basic',
    components: {
      vueSeamlessScroll
    },
    data() {
      return {
        barrageList: [],
        flagList: true
      }
    },
    created() {
      this.getTreeHole();
    },

    method: {
      getTreeHole() {
        this.$http.get(this.$constant.baseURL + "/webInfo/listTreeHole")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              res.data.forEach(m => {
                this.barrageList.push({
                  id: m.id,
                  avatar: m.avatar,
                  msg: m.message,
                  time: Math.floor(Math.random() * 5 + 10)
                });
              });
              this.flagList = false;
              this.$nextTick(() => {
                this.flagList = true

              })
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      }
    }
  }
</script>

<style scoped>
  .warp {
    height: 270px;
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
  }

  .warp ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  .warp ul li,
  .warp ul a {
    display: block;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }
</style>

三、实现效果

注意： 从服务器获取数据时，由于数据加载原因导致无法滚动的效果，在获取数据时添加nextTick即可解决。