微信小程序-----滚动字幕

我的滚动字幕除了文字还在前面加了个广播的图标，效果图如下：

滚动方式是上下滚动
js主要代码：

zimuList: [
       { 
         url: "", 
         title: "大娘家的千层豆腐新鲜出炉啦！！！", 
         icon: "../../images/food/guangbo.png"
        },
      { 
        url: "", 
        title: "今天的叶儿粑也太好吃了吧~",
        icon: "../../images/food/guangbo.png"
        },
      { 
      url: "", 
      title: "金针菜刚摘好，来尝尝吧~！！",
      icon: "../../images/food/guangbo.png" 
      }
      ]

wxml代码：

<view >
<swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000">
    <block wx:for="{{zimuList}}">
    <swiper-item>
      <view class="zimubox">
        <image src="{{item.icon}}" class="slide-icon"/>
        <view class="swiper_item">{{item.title}}</view>
      </view>
    </swiper-item>
    </block>
</swiper>
</view>

wxss代码如下：

.swiper_zi{
height: 50rpx;
width: 80vw;
}
.swiper_zi .zimubox{
  height:100%;
  width: 100%;
  display: flex;/*横向布局*/
}
.swiper_zi .zimubox .slide-icon{
  height: 45rpx;
  width: 45rpx;
  padding-left: 20rpx;
}
.swiper_zi .zimubox .swiper_item {
font-size: 26rpx;
overflow: hidden;/*隐藏溢出*/
text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
white-space: nowrap;/*强制文字不换行*/
color: red;
}

为了让图标和文字能够在一行需要添加 display: flex;