广告推送不适宜占用大幅位置，且动态滚动效果更能吸引视线。实现起来并没什么难度，主要是样式和布局，这次我们用小程序的swiper 组件来写一个自下往上滚动的跑马灯。
【效果图】（请自动忽略水印，因为找不到合适的录屏工具，23333）
【代码实现】在页面的JS代码的pages.data对数据进行初始化
data: {
news:[
'平安夜，百人祝福领取苹果~',
'寒流来袭，你的秋裤准备好了吗？',
'快收下，新鲜出炉冬季实用穿搭指南~'
],
autoplay: true,
interval: 2000,
duration: 1000,
},
WXML代码
<view class='horizontal happnews'>
<view class='item happy_tui'>
<swiper vertical autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular >
<block wx:for="{{news}}">
<swiper-item>
<view class='show-text-1 '>
<text class='tui_text'>推荐</text>
<text class='tui_item'>{{item}}</text>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class='more'>
<text>更多</text>
</view>
</view>
样式也一起贴上来吧，有需要的可以看看
page {
background: #f6f6f9;
}
.horizontal{
display: flex;
flex-direction: row;
}
.item {
flex: 1;
}
.happy_tui{
padding: 0 8px;
}
.happy_tui > swiper {
height: 30px;
line-height:30px;
}
.show-text-1{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.tui_item{
font-size: 12px;
color: #000;
vertical-align: middle;
}
.tui_text{
border: 1px solid #ED2A22;
border-radius: 12px;
font-size: 9px;
color: #ED2A22;
padding: 0 3px;
margin: 0 5px 0 0;
}
.more{
padding: 0 0 0 8px;
border-left: 1px solid #333;
text-align:center;
line-height:18px;
margin:auto 0;
}
.more > text{
font-size: 12px;
color: #000;
}
.happnews{
margin-top:10px;
padding: 8px 10px;
background: white;
}
