【微信小程序】跑马灯效果

广告推送不适宜占用大幅位置，且动态滚动效果更能吸引视线。实现起来并没什么难度，主要是样式和布局，这次我们用小程序的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;
}

码字不易，严禁盗转，转载请注明出处