微信小程序简单实现类似饿了么 美团文字公告告示垂直循环滚动效果

首先先来看下效果图

一开始的时候是打算自己用animation自己写出这样的一个动画效果，后面写完了，ui小姐姐看过后觉得十分不满意。

其实自己也觉得不太满意， 效果不太好，可能是自己功夫不到家啊，哈哈。

那么只能重新再搞搞呗 ，想到微信小程序组件里面有一个swiper组件。

既然能用来滚动轮播图为什么不能拿来滚动文字呢，细看确实有垂直滚动的功能，

马上拿来试试，最后弄完发现只需要改改默认高度，把image换成text完美使用，

下面贴代码：

html：

<swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical="true" circular="true"><block wx:for="{{imgUrls}}" wx:key="key"><swiper-item><text class="itme_text">{{item}}</text></swiper-item></block></swiper>

js：

data: {imgUrls: ['营业时间：9：00 - 22：00','服务电话：400-8998-8898','配送条件：1元起送 配送费6元'],indicatorDots: false,autoplay: true,interval: 3000,duration: 1000}

css：

swiper {width: 50%;height: 68rpx;position: absolute;left: 96rpx;top: 278rpx;pointer-events: none;cursor: default;}.itme_text {font-size: 26rpx;color: #fff;display: inline-block;z-index: 999;}

很简单的一个小东西 。