使用cube-ui中的cube-slide开发公告栏，文字上下滑动，向上滚动效果的功能

开发条件：使用cube-ui中的cube-slide开发公告栏，文字上下滑动，上下滚动效果的功能
开发过程中遇到的问题：

1. 在开发中遇到功能性的问题最先思索，该功能组件能否使用安装的UI中的组件去开发完成
2. 阅读官方文档，因为我只是粗略的的看了一遍，导致我写的cube-slide轮播没有将cube-slide-item里面的noticeList数组给循环出来，原因是我没有在cube-slide组件中给data属性传入我要循环的noticeList数组
3. 我的开发条件是竖列展示两条公告信息(可以一次显示多个slides)，因为我实在没有找到cube-slide组件中类似swiper的slidesPerView配置项，控制slide一次显示多个，所以我就修改的cube-slide的样式让它的overflow: initial;
4. 因为我的开发条件是竖向向上轮播，所以配置的轮播方向是direction：vertical

以上就是我个人开发中的总结，谢谢观看！！！

以下是代码以及样式：

<div class="notice">
  <div class="notice-wrap">
    <div class="notice-fl">
      <p>公告</p>
      <p>通知</p>
    </div>
    <div class="notice-fr notice-list">
      <div class="notice-list-warp">
        <cube-slide
          ref="slide"
          :data="noticeList"
          :loop="true"
          :showDots="false"
          direction="vertical"
        >
          <cube-slide-item v-for="(item, index) in noticeList" :key="index">
            <router-link
              tag="div"
              class="notice-item"
              :to="`/path/${item.ID}`"
            >
              <p
                class="title-type"
                :style="{
                  color: item.type== 1 ? '#ff3300' : '#A4B4E7',
                  borderColor:
                    item.type== 1 ? '#ff3300' : '#A4B4E7',
                }"
              >
                <span>{{ item.text}}</span>
              </p>
              <p class="title-content">{{ item.title}}</p>
            </router-link>
          </cube-slide-item>
        </cube-slide>
      </div>
    </div>
  </div>
</div>

.notice {
  overflow: auto;
  padding: 20rpx 30rpx;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.notice-wrap {
  height: 88rpx;
}
.notice-fl {
  height: 100%;
  float: left;
  font-size: 32rpx;
  line-height: 36rpx;
  font-style: italic;
  padding-right: 30rpx;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  p {
    font-weight: 600;
    color: #494949;
    &:first-child {
      color: #ff9c34;
    }
  }
}
.notice-fr {
  height: 100%;
  font-size: 28rpx;
  overflow: hidden;
  padding-left: 20rpx;
  .notice-list-warp {
    height: 50%;
    .cube-slide{
      overflow: initial;
    }
  }
  .notice-item {
    font-size: 26rpx;
    .title-type {
      float: left;
      font-size: 20rpx;
      border: 1px solid;
      border-radius: 1rem;
      line-height: initial;
      margin-right: 20rpx;
      span {
        display: inline-block;
        margin: 2rpx 12rpx;
        transform: scale(0.9);
      }
    }
    .title-content {
      line-height: 47rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}