vue+自写组件自动动态滚动的列表

已于 2024-07-02 09:34:25 修改
阅读量152 收藏
点赞数 2
文章标签： 前端
于 2024-07-02 09:30:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L47_28/article/details/140116689
版权

最终效果如下

QQ202472-84829

在template中

<div class="card-tab3">
      <card-view class="card height_3" title="碳金融质押" type="data" :data="data.config1.data" :showtitle="true" titleType="1"
        :isLoading="data.baseLoading">
        <div class="innerTitle1">
          <div>
            合计融资
            <span>{{ data.zy }}</span>
            万元
          </div>
        </div>
        <KScrollTable :config="data.config1" :auto="data.config1.data.length > 3 ? true : false"
          :style="{ height: '90%', marginTop: '2%', }">
        </KScrollTable>
      </card-view>

      <card-view class="card height_4" title="碳金融回购" type="data" :data="data.config2.data" :showtitle="true" titleType="1"
        :isLoading="data.baseLoading">
        <div class="innerTitle2">
          <div>
            <div>
              合计融资
              <span>{{ data.hg }}</span>
              万元
            </div>
          </div>
        </div>
        <KScrollTable :config="data.config2" :auto="data.config2.data.length > 3 ? true : false"
          :style="{ height: '90%', marginTop: '2%', }">
        </KScrollTable>
      </card-view>
    </div>

在<script lang="ts" setup>中

import KScrollTable from '@/components/KScrollTable.vue';
import { KScrollTableConfig } from "@/types/components";
import cardView from "@/components/card.vue";

const data: {
  config1: KScrollTableConfig;
  config2: KScrollTableConfig;
} = reactive({
  config1: {
    header: [
      {
        title: "控排企业/投资机构",
        key: "enterprises",
        class: "t1",
        align: 'center',
        width: "2.5fr"
      },
      {
        title: "金融服务机构",
        key: "financialServiceInstitutions",
        align: 'center',
        width: "2fr"
      },
      {
        title: "业务类型",
        key: "businessType",
        align: 'center',
        width: "1.5fr"
      },
      {
        title: "融资金额（万元）",
        key: "financingAmount",
        align: 'center',
        width: "2fr"
      },
    ],
    data: [

    ],
  },
 config2: {
    header: [
      {
        title: "控排企业/投资机构",
        key: "enterprises",
        class: "t1",
        align: 'center',
        width: "2.5fr"
      },
      {
        title: "金融服务机构",
        key: "financialServiceInstitutions",
        align: 'center',
        width: "2fr"
      },
      {
        title: "业务类型",
        key: "businessType",
        align: 'center',
        width: "1.5fr"
      },
      {
        title: "融资金额（万元）",
        key: "financingAmount",
        align: 'center',
        width: "2fr"
      },
    ],
    data: [

    ],
  },
});

function initCard4() {
  axios.get('./data/carbonFinance_new.json').then((res: any) => {
    let datas: any = res.data
    console.log('datas', datas)
    if (datas && datas.length) {
      for (let i = 0; i < datas.length; i++) {
        const element = datas[i];
        if (element.type == "质押") {
          data.zy = element.totalAmount
          data.config1.data = element.data.map((item: any) => {
            return {
              businessType: item.businessType ? item.businessType : '暂无',
              enterprises: item.enterprises ? item.enterprises : item.enterprises,
              financialServiceInstitutions: item.financialServiceInstitutions ? item.financialServiceInstitutions : item.financialServiceInstitutions,
              financingAmount: item.financingAmount ? item.financingAmount : item.financingAmount,
            }
          })
        } else {
          data.hg = element.totalAmount
          data.config2.data = element.data.map((item: any, index: any) => {
            return {
              index: index += 1,
              businessType: item.businessType ? item.businessType : '暂无',
              enterprises: item.enterprises ? item.enterprises : item.enterprises,
              financialServiceInstitutions: item.financialServiceInstitutions ? item.financialServiceInstitutions : item.financialServiceInstitutions,
              financingAmount: item.financingAmount ? item.financingAmount : item.financingAmount,
            }
          })
        }
      }
    }
  })

}

initCard4（）

css中（可能不全 有全局的样式）

.card-tab3 {
  display: flex;
  flex-direction: column;
  height: 100%;

  .yearBox {
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }

  .innerTitle1 {
    background: url("@/assets/images/innertitle1.png") no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 12%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #D7FEF9;
      letter-spacing: 2px;

      span:nth-child(1) {
        /* font-size: 0.0625rem; */
        /* color: #9AF0E7; */
        /* width: 134px; */
        /* height: 29px; */
        font-family: DINAlternate, DINAlternate;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 22px;
        /* text-align: left; */
        font-style: normal;
      }

      span:nth-child(2) {
        font-family: dinAlternateBold;
        font-weight: bold;
        font-size: 24px;
        color: #9AF0E7;
      }
    }
  }

  .jyinfo {
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .infotitle1 {
      width: 100%;
      height: 30%;
      display: flex;
      flex-direction: row;
      background: url("@/assets/images/titles1.png") no-repeat;
      background-size: 100% 100%;

      .commonsty {
        width: 33.3%;
        //height: 100%;
        //background-color: #133450;
        margin: 0 5px 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00DAD5;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .infotitle2 {
      width: 100%;
      height: 30%;
      display: flex;
      flex-direction: row;
      background: url("@/assets/images/titles2.png") no-repeat;
      background-size: 100% 100%;

      .commonsty {
        width: 33.3%;
        // height: 60%;
        //background-color: #133450;
        margin: 0 5px 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4DA8F6;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .infocontext {
      width: 100%;
      height: 100%;
      // height: 180px;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      // margin-top: 5px;

      .item {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 30%;

        .commonsty {
          width: 33.3%;
          // height: 60%;
          //background-color: black;
          margin: 7px 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 300;
          font-size: 12px;
          color: #FFFFFF;
        }
      }

      .active {
        background-color: #0e2849;
      }

    }
  }

  .innerTitle2 {
    background: url("@/assets/images/innertitle2.png") no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 12%;
    margin-left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #D7FEF9;
      letter-spacing: 2px;

      span:nth-child(1) {
        /* font-size: 0.0625rem; */
        /* color: #9AF0E7; */
        /* width: 134px; */
        /* height: 29px; */
        font-family: DINAlternate, DINAlternate;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 22px;
        /* text-align: left; */
        font-style: normal;
      }

      span:nth-child(2) {
        font-family: dinAlternateBold;
        font-weight: bold;
        font-size: 24px;
        color: #9AF0E7;
      }
    }
  }

  .card {}

  .cjqk {
    color: white;
    height: 100%;
    width: 100%;
    //background-color: #3375F1;
    display: flex;
    flex-direction: column;
    align-items: center;
    //margin-top: 5vh;

    .loadingBox {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      bottom: 0;
      min-height: 100px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .ljcje {
      width: 90%;
      height: 150px;
      background: url("@/assets/images/ljcje.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: space-around;
      position: relative;

      .ljcjetitle {
        position: absolute;
        top: 10px;
        color: #FFFFFF;
        letter-spacing: 1px;
        font-family: MicrosoftYaHei;
        font-size: 20px;
        line-height: 29px;
        font-style: normal;
      }

      .ljcjeNum {
        display: flex;
        position: absolute;
        top: 40%;
        align-items: flex-end;

        .item {
          width: 45px;
          height: 60px;
          background: rgb(14 29 32 / 30%);
          box-shadow: inset 0px 0px 10px 0px #60C8ED;
          border-radius: 10px;
          border: 1px solid #60C8ED;
          margin-right: 10px;
          line-height: 60px;
          text-align: center;

          span {
            font-weight: bold;
            font-size: 36px;
            color: #FFFFFF;
            font-family: dinAlternateBold;
          }
        }

        .item_ {
          width: 15px;
          height: 10px;
          /* background: rgba(14, 29, 32, 0.3); */
          /* -webkit-box-shadow: inset 0px 0px 0.052083rem 0px #60C8ED; */
          /* box-shadow: inset 0px 0px 0.052083rem 0px #60C8ED; */
          /* border-radius: 0.03125rem; */
          /* border: 1px solid #60C8ED; */
          /* margin-right: 0.036458rem; */
          line-height: 10px;
          text-align: center;
          font-size: 12px;
          font-weight: 900;
        }

        .dw {
          font-family: PingFangSC, PingFang SC;
          // font-weight: 600;
          font-size: 12px;
          color: #D7FEF9;
        }
      }
    }

    .ljcjl {
      width: 90%;
      height: 150px;
      background: url("@/assets/images/ljcjl.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: space-around;
      position: relative;

      .ljcjltitle {
        position: absolute;
        top: 10px;
        color: #FFFFFF;
        letter-spacing: 1px;
        font-family: MicrosoftYaHei;
        font-size: 20px;
        line-height: 29px;
        font-style: normal;
      }

      .ljcjlNum {
        display: flex;
        position: absolute;
        top: 40%;
        align-items: flex-end;

        .item {
          width: 45px;
          height: 60px;
          background: rgb(14 29 32 / 30%);
          box-shadow: inset 0px 0px 10px 0px #7AD5C7;
          border-radius: 10px;
          border: 1px solid #7AD5C7;
          margin-right: 10px;
          line-height: 60px;
          text-align: center;

          span {
            font-weight: bold;
            font-size: 36px;
            color: #FFFFFF;
            font-family: dinAlternateBold;
          }
        }

        .item_ {
          width: 15px;
          height: 10px;
          /* background: rgba(14, 29, 32, 0.3); */
          /* -webkit-box-shadow: inset 0px 0px 0.052083rem 0px #60C8ED; */
          /* box-shadow: inset 0px 0px 0.052083rem 0px #60C8ED; */
          /* border-radius: 0.03125rem; */
          /* border: 1px solid #60C8ED; */
          /* margin-right: 0.036458rem; */
          line-height: 10px;
          text-align: center;
          font-size: 12px;
          font-weight: 900;
        }

        .dw {
          font-family: PingFangSC, PingFang SC;
          // font-weight: 600;
          font-size: 12px;
          color: #D7FEF9;
        }
      }
    }

  }

  .cjr {
    color: white;
    height: 100%;
    width: 100%;
    //background-color: #3375F1;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 6vh;

    .tjrItm {
      width: 20px;
      height: 300px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 5px;
      font-family: dinAlternateBold;
      font-weight: bold;
      font-size: 22px;
      letter-spacing: 3px;
      writing-mode: vertical-rl;
    }

    .item {
      background: url("@/assets/images/cjr.png") no-repeat;
      background-size: 100% 100%;
      width: 360px;
      height: 330px;
      // margin-right: 10px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      // .titletjr {
      //   font-size: 24px;
      //   writing-mode: vertical-rl;
      //   letter-spacing: 2px;
      // }

      div:nth-child(1) {
        position: absolute;
        top: 70px;
        font-family: dinAlternateBold;
        font-weight: bold;
        font-size: 22px;
        color: #D7FEF9;
        letter-spacing: 1px;
      }

      div:nth-child(2) {
        position: absolute;
        top: 155px;

        span {
          font-family: dinAlternateBold;
          font-weight: bold;
          font-size: 22px;
        }
      }

      div:nth-child(3) {
        position: absolute;
        top: 230px;

        span {
          font-family: dinAlternateBold;
          font-weight: bold;
          font-size: 22px;
        }
      }
    }
  }

  .cj {
    color: white;
    height: 100%;
    width: 100%;
    //background-color: #3375F1;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 3vh;

    .title {
      position: absolute;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 0.15625rem;
      text-align: justify;
      font-style: normal;
      top: 54%;
      left: 37%;
    }

    .cje {
      background: url("@/assets/images/cje.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 400px;
      // margin-right: 10px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .items {
        margin-top: 30%;
        margin-left: 25%;
        /* width: 119px; */
        /* height: 42px; */
        font-family: Helvetica, Helvetica;
        /* font-weight: bold; */
        font-size: 23px;
        color: #FFFFFF;
        line-height: 36px;
        /* text-align: left; */
        font-style: normal;
      }

      span {
        margin-left: 25%;
      }
    }

    .cjl {
      background: url("@/assets/images/cjl.png") no-repeat;
      background-size: 100% 100%;
      width: 50%;
      height: 400px;
      // margin-right: 10px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .items {
        margin-top: 30%;
        margin-right: 25%;
        /* width: 119px; */
        /* height: 42px; */
        font-family: Helvetica, Helvetica;
        /* font-weight: bold; */
        font-size: 23px;
        color: #FFFFFF;
        line-height: 36px;
        /* text-align: left; */
        font-style: normal;
      }

      span {
        margin-right: 25%;
      }
    }
  }

  &>div:nth-child(1) {
    display: flex;
  }

  &>div:nth-child(2) {
    flex: 1;
  }
}

.height_3 {
  height: getHeight(400px, 838px);
}

.height_4 {
  height: getHeight(400px, 838px);
}

KScrollTable.vue

<template>
    <div class="swiper-table">
      <div class="header" :style="{ 'grid-template-columns': getWidth }">
        <div class="header-border top"></div>
        <div class="header-border bottom"></div>
        <span v-for="(item, index) in config.header" :key="index" :title="item.title"
          :style="{ 'text-align': getAlign(item.align) }">
          {{ item.title }}
        </span>
      </div>
      <div class="body">
         <ul class="fixed_ul" v-if="config?.fixedData?.length">
          <li class="li-child" v-for="(item, index) in config?.fixedData" :key="index"
            :style="{ 'grid-template-columns': getWidth, backgroundColor: item.__k_color }" @click="rowClick(item)">
            <span v-for="(j, k) in config.header" :class="j?.class" :key="k" :style="{ 'text-align': getAlign(j.align) }">
              <slot :name="j?.['key']" :value="item"><span :title="item?.[j?.['key']]">{{ item?.[j?.['key']] }}</span>
              </slot>
            </span>
          </li>
        </ul>
        <ul class="scroll_ul" ref="tableUl" :class="{ marquee_top: state.animate}"  @mouseenter="onEnter" @mouseleave="onLeave">
          <li class="li-child" v-for="(item, index) in state.list" :key="index" @click="rowClick(item)"
            :style="{ 'grid-template-columns': getWidth, backgroundColor: item.__k_color }">
            <span v-for="(j, k) in config.header" :class="j?.class" :key="k" :style="{ 'text-align': getAlign(j.align) }">
              <slot :name="j?.['key']" :value="{...item,index:index+1}"><span :title="item?.[j?.['key']]">{{ item?.[j?.['key']] }}</span>
              </slot>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
  import { defineProps, onUnmounted, ref, reactive, onMounted, nextTick, computed, watch } from "vue";
  import type {KScrollTableConfig} from "@/types/components";
  const props = defineProps<{
    config: KScrollTableConfig;
    rowClick?:(item:any)=>void;
    auto?: boolean
  }>()
  const state: {
    animate: boolean;
    list: any[];
    colorArr: string[];
    liHeight: number;
    isAuto: boolean;
  } = reactive({
    isAuto: false,
    animate: false,
    list: [],
    // colorArr: ["rgba(4, 122, 244, 0)", "rgba(4, 122, 244, 0.1)"],
    colorArr: ["rgba(11, 36, 66, 1)", "rgba(2, 27, 55, 1)"],
    liHeight: 0
  })
  const tableUl: any = ref(null)
  let timer: any = null
  const getWidth = computed(() => {
    let widthStr = ""
    props.config.header.forEach((item) => {
      widthStr += " "
      widthStr += item.width ?? 'auto' + ' '
    })
    //console.log(widthStr)
    return widthStr
  })
  function getAlign(align: 'left' | 'right' | 'center' | undefined | null): 'left' | 'right' | 'center' {
    if (align && ['left', 'right', 'center'].indexOf(align) != -1) {
      return align
    }
    return 'left'
  }
  function showMarquee() {
    state.animate = true;
    let bacColor = state.list[state.list.length - 1]?.__k_color == state.colorArr[0] ? state.colorArr[1] : state.colorArr[0]
  
    state.list.push({
        ...state.list[0],
        __k_color: bacColor
      });
    setTimeout(() => {
      state.list.shift();
      state.animate = false
    }, 1000)
  }
  function onEnter() {
    if (timer&&state.isAuto) {
      clearInterval(timer)
    }
  }
  function onLeave() {
    isScroll()
  }
  function rowClick(item:any){
    if(props.rowClick){
      props.rowClick(item)
    }
  }
  function isScroll() {
    if (state.isAuto) {
      if (timer) {
        clearInterval(timer)
      }
      timer = setInterval(showMarquee, 2000);
    }
  }
  watch([props, tableUl], () => {
    if (props && tableUl.value) {
      state.list = props.config.data.map((item, index) => {
        return {
          ...item,
          __k_color: state.colorArr[(index % 2)]
        }
      })
      nextTick(() => {
        const bodyHeight = tableUl.value.offsetHeight
        if (!tableUl.value.children?.length) {
          return
        }
        state.liHeight = tableUl.value.children[0].offsetHeight
        //console.dir(state.liHeight)
        if (props.auto && bodyHeight <= props.config.data.length * state.liHeight) {
          state.isAuto = true
          // 动态轮播
          isScroll()
        }
      })
    }
  },
    {
      immediate: true
    })
  
  onUnmounted(() => {
    if (timer) {
      clearInterval(timer)
    }
  })
  </script>
  <style lang="scss" scoped>
  .swiper-table {
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
  
    .header {
      display: grid;
      height: 50px;
      background-color: rgba(8, 106, 210, 0);
      flex-shrink: 0;
      position: relative;
      background: url("@/assets/images/titles1.png") no-repeat;
      background-size: 100% 100%;
  
      span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #00DAD5;
        line-height: 50px;
        padding: 0px 5px;
      }
  
      .header-border {
        display: inline-block;
        width: 100%;
        height: 2px;
        position: absolute;
      }
  
      .header-border.top {
        top: 0;
        //background: linear-gradient(to right, #047AF4 5px, rgba(4, 122, 244, 0.5) 5px, rgba(4, 122, 244, 0.5) calc(50% - 10px), #047AF4 calc(50% - 10px), #047AF4 50%, rgba(4, 122, 244, 0.5)50%, rgba(4, 122, 244, 0.5) calc(50% + 3px), #047AF4 calc(50% + 3px), #047AF4 calc(50% + 5px), rgba(4, 122, 244, 0.5) calc(50% + 5px), rgba(4, 122, 244, 0.5) calc(100% - 10px), #047AF4 calc(100% - 10px), #047AF4 100%);
      }
  
      .header-border.bottom {
        bottom: 0;
        //background: linear-gradient(to right, rgba(4, 122, 244, 0.5) 5px, rgba(4, 122, 244, 0.25) 5px, rgba(4, 122, 244, 0.25) calc(50% - 10px), rgba(4, 122, 244, 0.5) calc(50% - 10px), rgba(4, 122, 244, 0.5) 50%, rgba(4, 122, 244, 0.25)50%, rgba(4, 122, 244, 0.25) calc(50% + 3px), rgba(4, 122, 244, 0.5) calc(50% + 3px), rgba(4, 122, 244, 0.5) calc(50% + 5px), rgba(4, 122, 244, 0.25) calc(50% + 5px), rgba(4, 122, 244, 0.25) calc(100% - 10px), rgba(4, 122, 244, 0.5) calc(100% - 10px), rgba(4, 122, 244, 0.5) 100%);
      }
    }
  
    .body {
      flex: 1;
      height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  
      .marquee_top {
        transition: all 0.5s;
          li:nth-child(1){
            transition: all 0.5s;
            height: 0 !important;
          }
      }
  
      .fixed_ul {
        flex-shrink: 0;
        z-index: 2;
      }
  
      .scroll_ul {
        flex: 1;
      }
  
      ul {
        margin: 0;
        padding: 0;
        position: relative;
  
        li {
          display: grid;
          height: 45px;
          line-height: 45px;
  
          span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: inherit;
            padding: 0px 5px;
          }
        }
      }
    }
  }
  </style>

components.ts中

export type KScrollTableConfig = {
    header: {
        title: string,
        key: string;
        class?: string;
        width?: string;
        align?: 'left' | 'right' | 'center';
    }[];
    data: {
        [key: string]: any
    }[];
    fixedData?: {
        [key: string]: any
    }[];
}

carbonFinance_new.json（数据）

[
    {
        "data": [
            {
                "businessType": "碳质押贷款",
                "enterprises": "黄石东贝铸造有限公司",
                "financialServiceInstitutions": "民生银行武汉分行",
                "financingAmount": 300.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "湖北绿色家园材料技术股份有限公司",
                "financialServiceInstitutions": "工行银行仙桃支行",
                "financingAmount": 3000.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "黄石市海富高钙有限公司",
                "financialServiceInstitutions": "中国农业银行大治支行",
                "financingAmount": 500.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "黄石市福星铝业有限公司",
                "financialServiceInstitutions": "中国农业银行黄石分行",
                "financingAmount": 400.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "武汉荣方科技有限公司",
                "financialServiceInstitutions": "汉口银行股份有限公司潜江支行",
                "financingAmount": 260.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "武汉钢铁石化工业气体有限责任公司",
                "financialServiceInstitutions": "交通银行股份有限公司武汉青山支行",
                "financingAmount": 500.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "湖北楚星化工股份有限公司",
                "financialServiceInstitutions": "中国进出口银行湖北省分行",
                "financingAmount": 60000.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "荆门市格林美新材料有限公司",
                "financialServiceInstitutions": "中国农业银行股份有限公司荆门分行",
                "financingAmount": 2500.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "湖北三环车桥有限公司",
                "financialServiceInstitutions": "上海浦东发展银行股份有限公司武汉分行",
                "financingAmount": 100.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "威斯卡特工业（中国）有限公司",
                "financialServiceInstitutions": "上海浦东发展银行股份有限公司武汉分行",
                "financingAmount": 99.75
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "大冶市华厦铝业有限公司",
                "financialServiceInstitutions": "湖北大冶农村商业银行股份有限公司",
                "financingAmount": 100.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "湖北世纪新峰雷山水泥有限公司",
                "financialServiceInstitutions": "汉口银行股份有限公司鄂州分行",
                "financingAmount": 500.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "湖北华武重工集团有限公司",
                "financialServiceInstitutions": "中国银行股份有限公司鄂州分行",
                "financingAmount": 1000.00
            },
            {
                "businessType": "碳质押贷款",
                "enterprises": "中锰（湖北）科技发展有限公司",
                "financialServiceInstitutions": "中国银行股份有限公司三峡分行",
                "financingAmount": 1000.00
            }
        ],
        "totalAmount": 70359.75,
        "type": "质押"
    },
    {
        "data": [
            {
                "businessType": "碳配额回购",
                "enterprises": "广水华鑫冶金工业有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 1024.80
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "润海新能源(黄石)有限公司",
                "financialServiceInstitutions": "湖北中碳资产管理有限公司",
                "financingAmount": 1164.06
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "宜都东阳光化成箔有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 785.19
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "宜昌东阳光生化制药有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 1495.29
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "广水华鑫冶金工业有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 1999.27
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "峰碳科技（武汉）有限公司",
                "financialServiceInstitutions": "湖北中碳资产管理有限公司",
                "financingAmount": 1440.00
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "湖北世纪新峰雷山水泥有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 1000.00
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "湖北亿钧耀能新材股份公司",
                "financialServiceInstitutions": "国泰君安证券股份有限公司",
                "financingAmount": 1002.16
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "湖北世纪新峰雷山水泥有限公司",
                "financialServiceInstitutions": "国泰君安证券股份有限公司",
                "financingAmount": 1224.44
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "华新水泥股份有限公司",
                "financialServiceInstitutions": "中信证券股份有限公司",
                "financingAmount": 10000.00
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "深圳华碳未来新能源环保科技有限公司",
                "financialServiceInstitutions": "东方证券股份有限公司",
                "financingAmount": 240.00
            },
            {
                "businessType": "碳配额回购",
                "enterprises": "湖北三峡新型建材股份有限公司",
                "financialServiceInstitutions": "华泰证券股份有限公司",
                "financingAmount": 1300.00
            }
        ],
        "totalAmount": 22675.25,
        "type": "回购"
    }
]

L47_28
关注
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden; .item li{ height: 50px; display: flex;
【Vue3+TS+Vite】内部无限循环滚动组件
07-09
【Vue3+TS+Vite】内部无限循环滚动组件
【Vue】无缝滚动组件
G.E.M.千百度的博客
11-17 794
使用 vue3-seamless-scroll 插件，实现列表无缝滚动
vue实现列表自动滚动(纯与原生方式)
最新发布
weixin_47121832的博客
10-12 1877
Vue实现可视化大屏的列表滚动效果，纯手写
vue3实现自动滚动列表
men_blur的博客
01-15 2924
用于实现有表头跟表内容的自动滚动列表。
vue实现列表自动无缝滚动列表
m0_66403070的博客
02-20 1553
vue基于vue-seamless-scroll实现自动无缝滚动列表
vue列表自动滚动
qq_61672510的博客
10-12 2442
vue数据列表自动滚动，鼠标划入停止迭代效果
vue实现循环滚动列表
10-15
在Vue.js中实现循环滚动列表是一项常见的需求，特别是在构建数据密集型应用时，例如新闻滚动、商品轮播等。Vue-seamless-scroll是一款基于Vue的滚动插件，它提供了便捷的方式来实现这种效果。以下是实现这一功能的...
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错...
Vue列表如何实现滚动到指定位置样式改变效果
10-15
- Vue组件的事件处理。 - 使用Element UI组件库（或其他UI框架）时，组件的特定用法。 通过以上分析，我们可以看到，实现Vue列表滚动到指定位置并改变样式的功能，需要综合运用Vue的多种特性和JavaScript的DOM操作...
Vue3 列表自动滚动播放（表头固定、列表内容自动滚动播放）+ vue3-seamless-scroll - 附完整示例
m0_48968874的博客
08-05 3469
vue3-seamless-scroll：Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包 目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。
vue实现列表自动滚动效果
killerdoubie的博客
09-04 3120
3.在页面中使用（写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示）2.在main.js中引入注册。4.js配置滚动插件配置对象。
vue实现列表数据自动翻页和自动滚动
weixin_41545048的博客
07-20 1227
【代码】vue实现列表数据自动翻页和自动滚动。
vue实现列表自动滚动、向上滚动的效果（vue-seamless-scroll）
weixin_42125732的博客
05-19 2万+
今天研究了一个插件 列表自动滚动的插件vue-seamless-scroll 感受这是个做大屏可视化时可靠帮手 请欣赏一下效果图 如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动 这个使用起来也是非常的方便的，接下来我为各位老铁记录一下使用的过程 1.第一步进行安装 npm install vue-seamless-scroll --save 2.在main.js直接导入使用 import scroll from 'vue-seamless-scroll' Vue.use(..
vue实现列表自动滚动
style1226yi的博客
03-10 1560
vue实现列表自动滚动
vue实现列表自动滚动的方式（一）
热门推荐
zxczero的博客
07-05 3万+
vue实现列表自动滚动的方式（一）
Vue超简单列表自动滚动（vue-seamless-scroll）
sun的博客
01-24 1255
vue-seamless-scroll
vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)轮播表
LKnology的博客
07-20 2991
研究了一个插件 列表自动滚动的插件vue-seamless-scroll。如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动。感受这是个做大屏可视化时可靠帮手。/* 表格内背景颜色 */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值