vue动态上下平缓轮播滚动

最新推荐文章于 2024-06-19 17:24:25 发布

哆比哆比

最新推荐文章于 2024-06-19 17:24:25 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/WMW_wmw/article/details/125988735

版权

数据超过十条开始滚动

  <div class="left-block">
          <div class="list-block" :class="{ marquee: arr.length > 10 }">
            <div class="list" :style="`animation: row ${arr.length * 1}s linear infinite;`">
              <div v-for="(item, index) in arr" :key="index" class="dongtai">
                <p>{{ item.XXXX }}</p>
              </div>
            </div>
          </div>
        </div>

 data() {
    return {
      arr: []
    }
  },
  methods: {
    // 获取动态
    getJointSituationResults() {
      apiBase.xxxxx, res => { //接口
        this.srr = [ // 数据复制一下 让轮播滚动衔接更顺滑
          ...res.data.content,
          ...res.data.content
        ]
      })
    }
  },

.left-block {
        position: absolute;
        width: 95%;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        height: 89%;
        .list-block {
          height: 100%;
          overflow: hidden;
          .list {
            height: 100%;
            overflow: auto;
            /*IE*/
            -ms-overflow-style: none;
            /*火狐*/
            overflow: -moz-scrollbars-none;
            /*谷歌*/
            &::-webkit-scrollbar { //隐藏滚动条
              display: none;
            }
            .dongtai {
              width: 100%;
              position: relative;
              text-align: left;
              line-height: 25px;
              font-size: 18px;
              margin: 10px;
              p {
                font-size: 18px;
                font-family: SourceHanSansCN;
                font-weight: 400;
                color: #ffffff;
                line-height: 20px;
              }
            }
          }
        }
        //动画 平缓上偏移50%
        @keyframes row {
          0% {
          }
          100% {
            transform: translateY(-50%);
          }
        }
        .marquee {
          position: relative;
          .list {
            /* 调用动画 */
            height: initial;
            overflow: initial;
            // animation: row 15s linear infinite;  // 原先是写死的速度，由于数据不固定在html写了
          }
          .list:hover { // 鼠标悬停停止滚动
            animation-play-state: paused !important;
          }
        }
      }