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

首先先来看下效果图

一开始的时候是打算自己用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;
}

很简单的一个小东西 。