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

我的滚动字幕除了文字还在前面加了个广播的图标，效果图如下： 滚动方式是上下滚动 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;