滚动列表组件 vue-seamless-scroll

最新推荐文章于 2024-09-06 17:16:52 发布
最新推荐文章于 2024-09-06 17:16:52 发布
阅读量554 收藏 6
点赞数 8
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54397440/article/details/135262000
版权 
<!--
  *@文件名称 index.vue
  *@文件路径 src\views\Index\centerdata\index.vue
  *@模块名 [清单列表]
!-->
<template>
  <div class="centerdata">
    <div class="centerdata_bottom">
      <div class="bott_right">
        <div class="head">
          <div class="title">数据清单</div>
        </div>
        <div class="common-panel common-panel-l1">
          <div class="l1-wrap">
            <div class="th">
              <div class="t_auto">预警时间</div>
              <div class="t_auto">预警主体类型</div>
              <div class="t_auto">预警主体名称</div>
              <div class="t_auto">预警类型</div>
              <div class="t_auto">风险级别</div>
              <div class="t_auto">操作</div>
            </div>
            <vue-seamless-scroll :data="spData" class="warp">
              <ul class="item">
                <li v-for="(item, index) in spData" :key="index" :class="index % 2 === 0 ? 'backindex' : ''">
                  <div class="title">{{ item.time }}</div>
                  <div class="title">{{ item.type }}</div>
                  <div class="title" :title="item.name">{{ item.name }}</div>
                  <div class="title">{{ item.typee }}</div>
                  <div class="title" v-show="item.jibiue == '中'" style="color: #ffe329">{{ item.jibiue }}</div>
                  <div class="title" v-show="item.jibiue == '低'" style="color: #29ffb6">{{ item.jibiue }}</div>
                  <div class="title" v-show="item.jibiue == '高'" style="color: #ff2929">{{ item.jibiue }}</div>
                  <div class="title" style="color: #4cb8ff">详情</div>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  data() {
    return {
      input2: '',
      spData: [
        {
          time: '2023-12-12',
          type: '企业',
          name: '1',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '2',
          typee: '其他',
          jibiue: '低',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '北3',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '4',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '5',
          typee: '其他',
          jibiue: '高',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '6',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '7',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '8',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '9',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '0',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '11',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '12',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '13',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '14',
          typee: '其他',
          jibiue: '中',
        },
        {
          time: '2023-12-12',
          type: '企业',
          name: '15',
          typee: '其他',
          jibiue: '中',
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import './index.less';
.centerdata {
  // width: 27.3rem;
  .centerdata_head {
    display: flex;
    justify-content: space-between;
    .left_h {
      display: flex;

      .top {
        width: 10.48rem;
        height: 0.56rem;
        box-sizing: border-box;
        border: 0.03rem solid #fff;
        border-left: 0.01rem solid #fff !important;
        border-right: 0.01rem solid #fff !important;

        background-image: linear-gradient(266deg, #31bcff1a 0%, #0084ff1a 28%, #0084ff1a 77%, #42a2ff1a 100%);
        border-radius: 0.02rem;
        .ingf {
          border-radius: 0.06rem;
          height: 0.56rem;
        }
        ::v-deep .el-input__inner {
          line-height: 0.56rem;
          border: none;
          height: 0.56rem !important;
        }
      }
      .cneter_head_right {
        margin-left: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.12rem;
        height: 0.56rem;
        background-image: linear-gradient(255deg, #31bcff33 0%, #0084ff33 28%, #0084ff33 77%, #42a2ff33 100%);
        border-radius: 0.02rem;
        border: 0.03rem solid #fff;
        border-left: 0.01rem solid #fff !important;
        border-right: 0.01rem solid #fff !important;
        font-family: YouSheBiaoTiHei;
        font-size: 0.22rem;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        line-height: 0.24rem;

        text-shadow: 0 0.02rem 0.04rem #00000080;
      }
    }
    .right_h {
      width: 8.56rem;
      height: 0.52rem;
      background: url('./img/jinggao.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding-left: 2.1rem;
      .yuj {
        font-family: YouSheBiaoTiHei;
        font-size: 0.26rem;
        color: #ffffff;
        letter-spacing: 0;
        text-shadow: 0.04rem 0 0.24rem #ff0000;
      }
      .gongs {
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        font-size: 0.16rem;
        color: #ffffff;
        letter-spacing: 0;
      }
    }
  }
  .centerdata_bottom {
    margin-top: 0.4rem;
    display: flex;
    .bott_top {
      width: 7.94rem;
      height: 8.39rem;
      background: url('@/assets/img/cendata/cbg.png') no-repeat;
      background-size: 100% 100%;

      //   background-color: #ff0000;
      // background-image: linear-gradient(90deg, #003f8f00 0%, #001e564d 100%);
      .head {
        height: 0.63rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          padding-left: 0.86rem;
          width: 5.03rem;
          height: 0.63rem;
          background: url('@/assets/img/cendata/toubu.png') no-repeat;
          background-size: 100% 100%;
          line-height: 0.63rem;
          mix-blend-mode: lighten;
          font-family: YouSheBiaoTiHei;
          font-size: 0.3rem;
          color: #ffffff;
          letter-spacing: 0.02rem;
          text-shadow: 0.05rem 0 0 #bbd6ff24;
        }
      }
      .bott_bottom {
        padding: 0.22rem;

        display: flex;
        flex-direction: column;

        .bo_bt_card {
          margin-bottom: 0.13rem;
          padding-left: 0.44rem;
          //   width: 7.5rem;
          height: 0.93rem;
          background: url('@/assets/img/cendata/cardbg.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .card_left {
            display: flex;
            .paixu {
              background: url('@/assets/img/cendata/paix.png') no-repeat;
              background-size: 100% 100%;
              width: 0.5rem;
              height: 0.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: YouSheBiaoTiHei;
              font-size: 0.24rem;
              color: #ffffff;
              text-align: center;
              text-shadow: 0 0 0.04rem #4692df;
            }
            .qiye {
              margin-left: 0.36rem;
              .qiye_top {
                margin-bottom: 0.12rem;
                height: 0.16rem;
                font-family: SourceHanSansCN-Medium;
                font-weight: 500;
                font-size: 0.16rem;
                color: #ffffff;
                letter-spacing: 0;
              }
              .qiye_bot {
                height: 0.16rem;
                font-family: SourceHanSansCN-Regular;
                font-weight: 400;
                font-size: 0.16rem;
                color: #d2d2d2;
                letter-spacing: 0;
                text-align: center;
              }
            }
          }
          .qiye_rig {
            margin-right: 0.52rem;
            // right: 0;
            .num {
              color: #2cecff;
              font-size: 0.3rem;
              font-face: DINAlternate;
              font-weight: 700;
              line-height: 0;
              letter-spacing: 0;

              paragraph-spacing: 0;
              text-align: center;
            }
            .danwei {
              color: #ffffff;
              font-size: 0.14rem;
              font-face: SourceHanSansCN;
              font-weight: 500;
              line-height: 0;
              letter-spacing: 0;
              paragraph-spacing: 0;
              text-align: center;
            }
          }
        }
      }
    }
    .bott_right {
      margin-left: 0.29rem;
      width: 18.44rem;
      height: 8.39rem;
      //   background: red;
      background: url('@/assets/img/cendata/cendatabg.png') no-repeat;
      background-size: 100% 100%;

      .head {
        height: 0.63rem;
        display: flex;

        align-items: center;

        justify-content: space-between;
        .title {
          padding-left: 0.86rem;
          width: 5.03rem;
          height: 0.63rem;
          background: url('@/assets/img/cendata/toubu.png') no-repeat;
          background-size: 100% 100%;
          line-height: 0.63rem;
          mix-blend-mode: lighten;
          font-family: YouSheBiaoTiHei;
          font-size: 0.3rem;
          color: #ffffff;
          letter-spacing: 0.02rem;
          text-shadow: 0.05rem 0 0 #bbd6ff24;
        }
      }
      .common-panel {
        margin-top: 0.19rem;
        width: 100%;
        // height: 8.1rem;
        height: 6.8rem;
        overflow: hidden;

        .l1-wrap {
          .th {
            padding-left: 0.31rem;
            padding-top: 0.11rem;
            // max-width: 10.33rem;
            height: 0.4rem;
            background: url('@/assets/img/cendata/tablebg.png') no-repeat;

            // background: url('./img/baioge.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            .t_auto {
              width: 0.9rem;
              text-align: center;
              font-family: SourceHanSansCN-Medium;
              font-weight: 500;
              font-size: 0.16rem;
              color: #ffffff;
              white-space: nowrap;
            }
          }
          .warp {
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            ul {
              //   width: 10.33rem;
              width: 18.44rem;

              list-style: none;
              padding: 0;
              margin: 0 auto;
              li {
                padding-left: 0.31rem;
                align-items: center;
                height: 0.4rem;
                display: block;
                // line-height: 30px;
                display: flex;
                justify-content: space-between;
                // font-size: 15px;
                .title {
                  width: 0.9rem;
                  text-align: center;
                  height: 0.16rem;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
                  font-size: 0.16rem;
                  color: #ffffff;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 0.16rem;
                  display: -webkit-box;
                  overflow: hidden;
                  word-wrap: normal;
                  text-overflow: ellipsis;
                  //设置最多展示多少行
                  -webkit-line-clamp: 2;
                  //超出限制时显示...
                  -webkit-box-orient: vertical;
                }
                .one {
                  font-family: PingFangSC-SNaNremibold;
                  font-weight: 600;
                  font-size: 0.16rem;
                  color: #ff1e1e;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 0.16rem;
                }
                .two {
                  font-family: PingFangSC-SNaNremibold;
                  font-weight: 600;
                  font-size: 0.16rem;
                  color: #ff5a23;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 0.16rem;
                }
                .tree {
                  font-family: PingFangSC-SNaNremibold;
                  font-weight: 600;
                  font-size: 0.16rem;
                  // background: linear-gradient(to right,#FFFFFF , #FFB02D);
                  color: #ffb02d;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 0.16rem;
                }
              }
              .backindex {
                // background: url('./img/backindex.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
      ::v-deep .el-pagination button {
        color: #c0c4cc;
        background-color: transparent;
        border: 1px solid #1d61bd;
        cursor: not-allowed;
      }
      ::v-deep .el-pager li.active {
        background: #177afe;
        /* background-color: transparent; */
        /* background-color: transparent; */
        color: #fff;
        cursor: default;
      }
      ::v-deep .el-pager li {
        margin-right: 0.05rem;
        padding: 0 4px;
        background: transparent;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        color: #fff;
        border: 1px solid #1d61bd;
        line-height: 28px;
        box-sizing: border-box;
        text-align: center;
      }
      ::v-deep .el-pager li.btn-quicknext {
        line-height: 0.45rem;
        color: #fff;
        border: none;
      }
    }
  }
}
</style>

小大周
关注
vue实现列表的循环滚动组件
LuckXinXin的博客
10-03 1336
1.安装 cnpm install vue-seamless-scroll --save 2.文件中引入，组件配置 import vueSeamlessScroll from ‘vue-seamless-scroll’ 3.使用 <template> <div class="content1"> <table class="table" cellspacing="0"> <tr class="first_.
Vue无缝滚动组件vue-seamless-scroll
m0_55588226的博客
01-26 1819
Vue无缝滚动组件vue-seamless-scroll
史上最全vue滚动列表组件（结合多种业务场景）-解决VueSeamlessScroll多个痛点问题
最新发布
ll_883963的博客
09-06 700
2.VueSeamlessScroll 不兼容滚动至最后一条返回第一条。1.VueSeamlessScroll 无缝滚动点击事件不生效。
vue 列表滚动组件 vue-seamless-scroll
dashen110的博客
07-05 570
vue 列表滚动组件 vue-seamless-scroll
vue滚动组件
u010122776的博客
03-25 656
vue滚动组件：vue-seamless-scroll 链接：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others
vue的无缝滚动组件vue-seamless-scroll实例
08-28
Vue 无缝滚动组件 Vue-Seamless-Scroll 实例 Vue-Seamless-Scroll 是一个基于 Vue.js 的无缝滚动组件，提供了简洁易用的 API，帮助开发者快速实现无缝滚动效果。本文将详细介绍 Vue-Seamless-Scroll 的用法和配置。...
vue实现自动滚动、向上滚动的效果循环无缝滚动组件vue-seamless-scroll
qq_28170105的博客
05-28 5364
如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动 1.第一步进行安装 npm install vue-seamless-scroll --save 2.在main.js直接导入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) Test.vue来使用(结合ul li制作的表格来一起实现的) <template> <div class="jg-dw-jr"> &lt.
vue无缝滚动列表插件vue-seamless-scroll使用|vue无缝滚动列表实现
qq_42877655的博客
07-19 811
vue-seamless-scroll（文档里面没有使用方式） 1.安装 cnpm install vue-seamless-scroll --save 2.页面上使用 import Scroll from 'vue-seamless-scroll' components:{ Scroll } data(){ return{ scrollData:{ // 插件配置 ps：注意 limitMoveNum 开始无缝滚动的数据量、step 数值越大速度滚动越快、 ste
vue实现循环滚动列表
10-15
主要为大家详细介绍了vue实现循环滚动列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue左右拖动上下滚动组件
02-15
这是一个vue,pc端上的局部上下滚动，左右拖动单元格元素组件
vue 内容滚动组件
blizzard_ing的博客
11-28 1649
内容滚动组件，封装成一个vue组件了
VUE中使用滚动组件-vueSeamlessScroll
weixin_53874202的博客
04-26 2998
vue中滚动；vueSeamlessScroll组件
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3069
1、npm安装 npm install vue-seamless-scroll --save 2、引入 import scroll from 'vue-seamless-scroll' 官方demo:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 3、使用 ...
【vue】vue高性能虚拟滚动列表【vue2和vue3版组件封装】
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
06-30 4590
containerHeight高度(容器高度)和数据列表listData。containerHeight高度(容器高度)和数据列表listData。containerHeight高度(容器高度)和数据列表listData。之渲染可视窗口的列表，其他列表不进行渲染。virtualList 组件包。virtualList 组件包。virtualList 组件包。评论，你的意见是我进步的财富！应用virtualList。应用virtualList。
【功能记录】在vue中实现无缝滚动列表
hejinDW的博客
08-10 2822
vue中实现无缝滚动列表
h5页面 引入 vue 和 vue-seamless-scroll vue-seamless-scroll如何使用？
02-29
<div slot-scope="item" class="scroll-item">{{ item }} </vue-seamless-scroll> ``` 其中，`:list`属性用于传递滚动内容的数组，`slot-scope`用于定义插槽内容。 以上是引入Vue和vue-seamless-scroll的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值