首先先来看下效果图
一开始的时候是打算自己用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;}
很简单的一个小东西 。