So erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang)

In diesem Artikel erfahren Sie, wie Sie den Effekt des Scrollens einer einzelnen Textzeile (mit Code) erzielen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Ich arbeite kürzlich an einer Veranstaltungsseite und benötige eine einzelne Textzeile, um nach oben zu scrollen und die Preisbekanntgabe anzuzeigen.

Der Effekt ist wie folgt:

Fügen Sie ohne weitere Umschweife einfach den Code direkt unten ein.

HTML-Code lautet wie folgt:

 <div class="notice">
   <img src="./img/notice.png" alt="">
   <div class="wrap">
     <ul :style="{top: noticeTop + &#39;rem&#39;}" :class="{transitionTop: isActive}">
       <li v-for="(item, index) in noticeList" :key="index">{{item.phone}}抽中{{item.prizeName}}</li>
       <li v-if="noticeLen > 0">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
       <li v-if="noticeLen === 1">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
       <li v-if="noticeLen === 0">获奖公告</li>
     </ul>
   </div>
 </div>

weniger Code lautet wie folgt:

 .notice{
     display: flex;
     justify-content: center;
     padding-bottom: .26rem;
     img{
       width: .3rem;
       height: .24rem;
     }
     .wrap{
       position: relative;
       height:.3rem;
       overflow: hidden;
       margin-left: .15rem;
       font-size: .24rem;
       color: #391b03;
     }
     ul{
       position: relative;
       top: -.3rem;
       li{
         height: .3rem;
         line-height: .3rem;
       }
     }
     .transitionTop{
       transition: top 200ms ease-in-out;
     }
 }

Der js-Code lautet wie folgt:

 // data下
 noticeTop: 0, // 公告top值
 isActive:true, // 是否显示transitionTop动画
 timer: null, // 公告滚动定时器
 noticeList: [
   {
     phone:'135****1234',
     prizeName:'50元还款券'
   },
   {
     phone:'135****1234',
     prizeName:'60元还款券'
   },
   {
     phone:'135****1234',
     prizeName:'70元还款券'
   }
 ], // 公告列表
 
 // computed下
 noticeLen(){ // 公告列表长度
     return this.noticeList.length;
 }
 //methods下
 noticeScroll(){// 公告滚动，定时改变公告的top值
     if(this.noticeLen > 0){
       let index =1,
           len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
       this.timer = setInterval(() => {
         this.isActive = true;
         this.noticeTop = -3 * index / 10;
         index ++;
         if(index === len){// 滚动到底部时返回
           let delayTime = setTimeout(() => {
             this.isActive = false;
             this.noticeTop = 0;
             index = 1;
             clearTimeout(delayTime);
           }, 1000);
         }
       }, 3000);
     }
 }
 //调用
 this.noticeScroll();

Es ist zu beachten, dass:
Das Projekt basiert auf der Vue-Syntax
2 Beim Scrollen nach unten und beim Zurückkehren wird eine Verzögerung hinzugefügt. Dies dient dazu, zum letzten scrollen und dann vom letzten zum ersten zurückkehren zu können.                                      

Verwandte Artikel Empfohlen:

Wie erzielt man Spezialeffekte für seitenrollende Animationen?

Wie verwende ich CSS3, um gut aussehende Schaltflächen zu erstellen?

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!