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