前提:
由于小程序標(biāo)簽和web端標(biāo)簽不同熊咽,所以無法使用原有屬性直接實現(xiàn)文字滾動。
首先面向百度編程
ennnnnnnnn....算了不貼代碼了,一搜一大堆的東西粘勒,不騙字?jǐn)?shù),清一色js實現(xiàn)
缺點
實驗了一下屎即,通過js實現(xiàn)的話庙睡,
- 會有卡頓的效果事富,不柔和。要求不高的可以使用
- 大量代碼乘陪,這不是產(chǎn)品認(rèn)為的簡單需求么统台,怎么能耗費這么多代碼呢。作為一個初入行業(yè)的搬磚工來說也是不可容忍的啡邑。
利用動畫完美解決
//滾動文案
<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谤逼。