系统消息定宽横向滚动以及定高纵向滚动
**********************************系统消息定宽横向滚动******************************************
要求:
多条消息横向循环滚动
效果:
原理:
- 放消息的外部盒子定宽, 超出隐藏, 设置 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 }
分享一刻:
这是每年一度的调查，根据过去一年中 GitHub 新增的 Star 数量，对各个领域的 JavaScript 工具进行排名，可以快速掌握新出现的主流工具。
