微信小程序实现字幕上下滚动

效果图:

代码:
*.js

page({
	data:{
		adList:[{
      'url':'',
      'title':'刚刚预约了服务'
    },{
      'url':'',
      'title':'内容内容内容内容内容'
    }],
	}
})

*.wxml

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

*.wxss

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