标签：vue 滚动 name item sales width rows const 播放

vue可视化

转载自：https://juejin.cn/post/6931189766109003783

 

 

滚动播报

 

 公共组件-路由组件

<template>
<div class="scroll">
  <div class="scroll-header"
        :style="{
          height : headerConfig.headerHeight + 'px',
          background: headerConfig.headerBackground,
        }">
    <div class="scroll-header-item"
         v-for="(item, index) in headerConfig.headerItems"
         :key = "'scroll-header-item' + index"
         :style="{
           width: averageWidth + 'px',
           ... headerConfig.headerStyle[index]
         }">
         {{item}}</div>
  </div>
  <div class="scroll-content" ref="scrollContent">
    <div v-for="(item, index) in rowsData"
         :key = "item.index"
         :style = "{
           height: rowHeights[index] + 'px',
           background: item.index % 2 === 0 ? rowBackground[0] : rowBackground[1]
          }"
         class="scroll-content-li">
      <div v-for="( k, i ) in Object.keys(item.data)"
           :key = "'scroll-content-li' + i"
           class="scroll-content-li-item"
           :style="{
             width: headerConfig.headerStyle[i].width ? headerConfig.headerStyle[i].width : averageWidth + 'px',
            }">{{item.data[k]}}</div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'scroll',
  props: {
    header: {
      type: Object,
      required: true
    },
    rows: {
      type: Array,
      required: true
    },
    capacity: {
      type: Number,
      required: true
    },
    rowBackground: {
      type: Array,
      default: function () {
        return ['hsl(207deg 84% 51% / 8%)', 'transparent']
      }
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      headerConfig: null,
      averageWidth: 0,
      rowHeight: 0,
      currentIndex: 0,
      rowsx: null,
      rowsData: null,
      step: 1,
      rowHeights: new Array(this.rows.length).fill(0)
    }
  },
  watch: {
    rows: {
      handler (newValue, oldValue) {
        this.handleRowData()
        const index = this.currentIndex > 0 ? this.currentIndex - 1 : this.currentIndex
        const temp = this.rowsx.slice(index)
        temp.push(...this.rowsx.slice(0, index))
        this.rowsData = temp
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.animation()
        }, this.duration)
      },
      deep: true
    }
  },
  methods: {
    handleRowData () {
      let temp = this.rows.slice()
      if (this.rows.length > this.capacity) {
        temp = this.rows.slice().concat(this.rows.slice())
      }
      this.rowsx = temp.map((item, index) => {
        return {
          data: item,
          index: index
        }
      })
      this.rowsData = this.rowsx.slice()
    },
    setConfig () {
      const headerConfigDefault = {
        headerItems: [],
        headerBackground: 'transparent',
        headerHeight: 60,
        headerStyle: []
      }
      this.headerConfig = Object.assign(headerConfigDefault, this.header)
      this.handleRowData()
    },
    setHeaderWidth () {
      const width = this.$el.clientWidth
      let fixedWidth = 0
      let n = 0
      this.headerConfig.headerStyle.forEach(item => {
        if (item.width) {
          fixedWidth += parseInt(item.width)
          n++
        }
      })
      this.averageWidth = (width - fixedWidth) / (this.header.headerItems.length - n)
    },
    animation () {
      clearTimeout(this.timer)
      const len = this.rowsx.length
      if (len <= this.capacity) return
      const temp = this.rowsx.slice(this.currentIndex)
      temp.push(...this.rowsx.slice(0, this.currentIndex))
      this.rowHeights = new Array(len).fill(this.rowHeight)
      this.rowHeights.splice(0, this.step, ...new Array(this.step).fill(0))
      this.rowsData = temp
      this.currentIndex += this.step

      const isLast = this.currentIndex - len
      if (isLast >= 0) this.currentIndex = isLast

      this.timer = setTimeout(() => {
        this.animation()
      }, this.duration)
    },
    setContentHeight () {
      const height = this.$el.clientHeight
      const h = height - this.headerConfig.headerHeight
      this.$refs.scrollContent.style.height = h + 'px'
      const min = Math.min(this.rows.length, this.capacity)
      this.rowHeight = h / min
      this.rowHeights = new Array(min).fill(this.rowHeight)
    }
  },
  created () {
    if (!this.header.headerItems || this.header.headerItems.length === 0) return
    this.setConfig()
    this.$nextTick(() => {
      this.setHeaderWidth()
      this.setContentHeight()
      this.timer = setTimeout(() => {
        this.animation()
      }, this.duration)
    })
  }
}
</script>
<style lang="less" scoped>
.scroll{
  height: 100%;
  width: 100%;
  text-align: center;
  &-header{
    display: flex;
    align-items: center;
    &-item{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  &-content{
    overflow: hidden;
    &-li{
      display: flex;
      align-items: center;
      overflow: hidden;
      transition: all 0.3s linear;
      &-item{
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        padding:0 10px;
      }
    }
  }
}
</style>

components/Common/Scroll.vue

<template>
    <div class="star-product">
      <div class="title">明星产品销售概况</div>
      <div class="list">
        <scroll
          :header="header"
          :rows="list"
          :duration="duration"
          :capacity="6"
        ></scroll>
      </div>
    </div>
</template>
<script>
import Scroll from "@/components/Common/Scroll";
export default {
  components: {
    Scroll,
  },
  data() {
    return {
      starProduct:  [   
        {
          name: "A品牌木门",
          sales: 92090,
          orders: 51,
        },
        {
          name: "B品牌沙发",
          sales: 602090,
          orders: 107,
        },
        {
          name: "C品牌衣柜",
          sales: 802090,
          orders: 94,
        },
        {
          name: "D品牌木门",
          sales: 92090,
          orders: 51,
        },
        {
          name: "E品牌沙发",
          sales: 602090,
          orders: 107,
        },
        {
          name: "F品牌木门",
          sales: 92090,
          orders: 51,
        },
        {
          name: "G品牌木门",
        //   sales: 92090,
        //   orders: 51,
        },
        // {
        //   name: "H品牌沙发",
        //   sales: 602090,
        //   orders: 107,
        // },
      ],

      header: {
        headerItems: ["产品", "销售额", "订单量",],
        headerHeight: 140,
        headerStyle: [
          {
            fontSize: "45px",
          },
          {
            width: "260px",
            fontSize: "45px",
          },
          {
            width: "260px",
            fontSize: "45px",
          },
        ],
      },
      rowBg: ["red", "green"],
      duration: 3000,
    };
  },
  computed: {
    list() {
      return this.starProduct;
    },
  },
};
</script>
<style lang="less" scoped>
.star-product {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .title {
    height: 100px;
    font-size: 40px;
    font-weight: bold;
  }
  .list {
    flex: 1;
    width: 100%;
    font-size: 36px;
  }
}
</style>

components/Scroll.vue

 

标签：vue,滚动,name,item,sales,width,rows,const,播放
来源： https://www.cnblogs.com/huahuawang/p/14900899.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。