系统消息定宽横向滚动以及定高纵向滚动

**********************************系统消息定宽横向滚动******************************************

要求: 

　　多条消息横向循环滚动

效果:

 原理:

• 放消息的外部盒子定宽, 超出隐藏,  设置 white-space: nowrap; 使得文本不换行, 一行显示
• 每条消息设置 display: inline; 使得所有消息拼接在一行   

实现代码:

html:

    <!-- 横向滚动 -->
      <div
        class="transverse_scroll"
        v-show="messageList.length && userInfo && userInfo.id"
      >
        <!-- 消息icon/数量 -->
        <div class="icon_box" @click="goLink('messagePage')">
          <i class="el-icon-bell"></i>
          <div class="messageNumber" v-if="messageNumber > 0">
            {{ messageNumber }}
          </div>
        </div>

        <!-- 消息列表 -->
        <div id="scroll_div" ref="scrollDiv">
15           <div id="scroll_begin" ref="scrollBegin">
16             <span
17               class="pad_right"
18               v-for="(item, index) in messageList"
19               :key="index"
20               >{{ item.content }}</span
21             >
22           </div>
23           <div id="scroll_end" ref="scrollEnd"></div>
24         </div>
      </div>

js:

mounted() {
    this.$nextTick(() => { // 解决取不到元素的问题
      setTimeout(() => {
        this.scrollImgLeft(); // 解决 scrollImgLeft函数中 获取scroll_begin.innerHTML为空的问题
      }, 500);
    });
},
methods: {
    //文字横向滚动
    scrollImgLeft() {
      var speed = 50;
      var scroll_begin = this.$refs.scrollBegin;
      var scroll_end = this.$refs.scrollEnd;
      var scroll_div = this.$refs.scrollDiv;
      scroll_end.innerHTML = scroll_begin.innerHTML;
      console.log(scroll_end, scroll_end.innerHTML);
      // 滚动函数处理
      function Marquee() {
19         // 当滚动距离 >= 内容长度 滚动距离初始化
20         if (scroll_end.offsetWidth <= scroll_div.scrollLeft) {
21           scroll_div.scrollLeft -= scroll_begin.offsetWidth;
22           // scroll_div.scrollLeft = 0 // 这种写法和上面的效果是一样的,都是初始化滚动距离
23         } else { // 反之, 滚动距离++
24           scroll_div.scrollLeft++;
25         }
26       }
      // 开始滚动
      var scrollTimer = setInterval(Marquee, speed);
      // 鼠标移入关闭定时器,停止滚动
      scroll_div.onmouseover = function () {
        clearInterval(scrollTimer);
      };
      // 鼠标移出开启定时器,开始滚动
      scroll_div.onmouseout = function () {
        scrollTimer = setInterval(Marquee, speed);
      };
    },

}

css:

    // 横向滚动
    .transverse_scroll {
       100%;
      height: 100%;
      display: flex;
      #scroll_div {
         100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        white-space: nowrap; // 文本不换行,直到遇到 <br> 标签为止。
        flex: 1;
        margin-left: 10px;
        #scroll_begin,
        #scroll_end {
          display: inline; // 显示在一行
          .pad_right {
            padding-right: 2em;
          }
        }
      }
    }

**********************************系统消息定宽定高纵向滚动******************************************

要求: 

　　多条消息纵向循环滚动, 一行显示不全, 超出显示省略号

效果:

原理:

　　借用 vue-awesome-swiper 插件实现

实现代码:

html:

<swiper class="portrait_scroll" :options="swiperOption" v-show="messageList.length">
        <swiper-slide
          v-for="(item, index) in messageList"
          :key="index"
          class="message_item"
          v-show="index < 10"
        >
          <div class="icon_box" @click="goLink('messagePage')">
            <i class="el-icon-bell"></i>
            <div class="messageNumber" v-if="messageNumber>0">{{messageNumber}}</div>
          </div>
          <a :href="item.linkUrl | urlFilters" :target="item.linkUrl ? '_blank' : '_self'">
            <div class="name">{{ item.content }}</div>
          </a>
          </swiper-slide
        >
 </swiper>

js:

 data() {
    return {
      swiperOption: {
        direction: "vertical",
        height: 40, //你的slide高度
        // 自动切换图配置
        autoplay: {
          delay: 4000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        // // 环状轮播
        loop: true,
        // 一个屏幕展示的数量
        slidesPerView: 1,
      },
    };
  },

css:

    // 纵向滚动
    @mixin oneEll($w) {
       $w;
      overflow: hidden;
      word-break: keep-all;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .portrait_scroll {
      .message_item {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        .name {
          @include oneEll(550px);
          margin-left: 5px;
        }
      }
    }    

分享一刻:

　　2020年崛起的 JavaScript 新工具

　　这是每年一度的调查，根据过去一年中 GitHub 新增的 Star 数量，对各个领域的 JavaScript 工具进行排名，可以快速掌握新出现的主流工具。