vue 公告消息横向滚动

第一种：纯文字展示，只有一句话

效果图

父组件中使用

// 引入
import noticeBar from '@/views/my_components/noticeBar.vue'// 消息滚屏

// 注册组件
components:{  noticeBar }
// 使用


// 数据
   noticeCon: 'import NoticeBar from @/components/NoticeBarimport NoticeBar from @/components/NoticeBar',
// 方法
 openTip () {}

第二种： 消息列表在滚屏上横向滚动

效果图：

子组件

父组件中使用

// 引入
import Slider from '@/views/my_components/Slider.vue'// 消息滚屏

// 注册组件
components:{  Slider }
// 使用

     
     
通知：
     

 

// 数据
  sliderData: [
       {
           title: '1美国作家杰罗姆·大卫·塞林格创作的唯一一部长篇小说'
       },
       {
       title: '2首次出版于1951年'
       },
       {
       title: '3天时间内'
       },
       {
       title: '4内心世界'
       },
       {
       title: '5在青少年中引起强烈共鸣'
       }
   ],
// 方法
getSliderTitle (title) { // 获取点击的标题
      console.log('title:', title)
  },

样式

.notice{
  display: inline-flex;
       align-items: center;
       padding: 0 20px;
       height: 50px;
       overflow: hidden;
       img{
           margin-right: 10px;
       }
       .tit{
           width: 50px;
       }
       .notice_con{
           width: 93%;
           padding-right: 20px;
           white-space: nowrap;
           overflow: hidden;
       }
   }