前提:
由于小程序标签和web端标签不同,所以无法使用原有属性直接实现文字滚动。
首先面向百度编程
ennnnnnnnn....算了不贴代码了,一搜一大堆的东西,不骗字数,清一色js实现
缺点
实验了一下,通过js实现的话,
- 会有卡顿的效果,不柔和。要求不高的可以使用
- 大量代码,这不是产品认为的简单需求么,怎么能耗费这么多代码呢。作为一个初入行业的搬砖工来说也是不可容忍的。
利用动画完美解决
//滚动文案
<view class='scrollx'>
<view class="scroll-animation">滚动文案</view>
</view>
//css
.scrollx{
width: 100%;
height: 68rpx;
line-height: 68rpx;
white-space: nowrap;
font-size: 14px;
position: relative;
overflow: hidden;
}
.scroll-animation{
position: absolute;
top:0px;
width: 100%;
font-size: 26rpx;
color: rgba(25,83,157,1);
animation: scrollItps 18s linear infinite ;
}
@keyframes scrollItps{
0% { left:100%;}//其实这里最好使用 transform: translate();translate针对的本身元素平移,left这种百分比是针对父元素的
100% { left:-180%; }
}
至于文字滚动方向.......不是更简单了么。上上下下左右左右ABAB。