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

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

要求: 

　　多条消息横向循环滚动

 

效果:

 

 原理:

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

 

实现代码:

html:

 1     <!-- 横向滚动 -->
 2       <div
 3         class="transverse_scroll"
 4         v-show="messageList.length && userInfo && userInfo.id"
 5       >
 6         <!-- 消息icon/数量 -->
 7         <div class="icon_box" @click="goLink('messagePage')">
 8           <i class="el-icon-bell"></i>
 9           <div class="messageNumber" v-if="messageNumber > 0">
10             {{ messageNumber }}
11           </div>
12         </div>

13         <!-- 消息列表 -->
14         <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>
25       </div>

 

js:

 1 mounted() {
 2     this.$nextTick(() => { // 解决取不到元素的问题
 3       setTimeout(() => {
 4         this.scrollImgLeft(); // 解决 scrollImgLeft函数中 获取scroll_begin.innerHTML为空的问题
 5       }, 500);
 6     });
 7 },
 8 methods: {
 9     //文字横向滚动
10     scrollImgLeft() {
11       var speed = 50;
12       var scroll_begin = this.$refs.scrollBegin;
13       var scroll_end = this.$refs.scrollEnd;
14       var scroll_div = this.$refs.scrollDiv;
15       scroll_end.innerHTML = scroll_begin.innerHTML;
16       console.log(scroll_end, scroll_end.innerHTML);
17       // 滚动函数处理
18       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       }
27       // 开始滚动
28       var scrollTimer = setInterval(Marquee, speed);
29       // 鼠标移入关闭定时器,停止滚动
30       scroll_div.onmouseover = function () {
31         clearInterval(scrollTimer);
32       };
33       // 鼠标移出开启定时器,开始滚动
34       scroll_div.onmouseout = function () {
35         scrollTimer = setInterval(Marquee, speed);
36       };
37     },
38 
39 }

 

css:

 1     // 横向滚动
 2     .transverse_scroll {
 3       width: 100%;
 4       height: 100%;
 5       display: flex;
 6       #scroll_div {
 7         width: 100%;
 8         height: 40px;
 9         line-height: 40px;
10         overflow: hidden;
11         white-space: nowrap; // 文本不换行,直到遇到 <br> 标签为止。
12         flex: 1;
13         margin-left: 10px;
14         #scroll_begin,
15         #scroll_end {
16           display: inline; // 显示在一行
17           .pad_right {
18             padding-right: 2em;
19           }
20         }
21       }
22     }

 

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

 

要求: 

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

 

效果:

 

 

 

原理:

　　借用 vue-awesome-swiper 插件实现

 

实现代码:

html:

 1 <swiper class="portrait_scroll" :options="swiperOption" v-show="messageList.length">
 2         <swiper-slide
 3           v-for="(item, index) in messageList"
 4           :key="index"
 5           class="message_item"
 6           v-show="index < 10"
 7         >
 8           <div class="icon_box" @click="goLink('messagePage')">
 9             <i class="el-icon-bell"></i>
10             <div class="messageNumber" v-if="messageNumber>0">{{messageNumber}}</div>
11           </div>
12           <a :href="item.linkUrl | urlFilters" :target="item.linkUrl ? '_blank' : '_self'">
13             <div class="name">{{ item.content }}</div>
14           </a>
15           </swiper-slide
16         >
17  </swiper>

 

js:

 1  data() {
 2     return {
 3       swiperOption: {
 4         direction: "vertical",
 5         height: 40, //你的slide高度
 6         // 自动切换图配置
 7         autoplay: {
 8           delay: 4000,
 9           stopOnLastSlide: false,
10           disableOnInteraction: true,
11         },
12         // // 环状轮播
13         loop: true,
14         // 一个屏幕展示的数量
15         slidesPerView: 1,
16       },
17     };
18   },

 

css:

 1     // 纵向滚动
 2     @mixin oneEll($w) {
 3       width: $w;
 4       overflow: hidden;
 5       word-break: keep-all;
 6       white-space: nowrap;
 7       text-overflow: ellipsis;
 8     }
 9     .portrait_scroll {
10       .message_item {
11         display: flex;
12         align-items: center;
13         height: 40px;
14         line-height: 40px;
15         .name {
16           @include oneEll(550px);
17           margin-left: 5px;
18         }
19       }
20     }

 

分享一刻:

　　2020年崛起的 JavaScript 新工具

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

posted @ 2021-02-26 17:38  银翘解毒片  阅读(213)  评论(0)  编辑  收藏  举报