So erstellen Sie einen Laufschrifteffekt im WeChat-Miniprogramm (mit Code)

Dieses Mal zeige ich Ihnen, wie Sie einen Laufschrifteffekt im WeChat-Miniprogramm erstellen (mit Code). Was sind die Vorsichtsmaßnahmen zum Erstellen des Laufschrifteffekts im WeChat-Miniprogramm? Werfen wir einen Blick darauf.

1: Funktionseinführung und Erklärung

Die Wirkung des Laufschriftbereichs (der Titel des Artikels wird im Laufschriftbereich angezeigt) und so weiter Auf der rechten Seite gibt es eine Schaltfläche zum Anzeigen von Artikeln. Die Schaltfläche ist an die ID der aktuellen Tickerinformationen gebunden. Nach dem Klicken auf die Schaltfläche gelangen Sie entsprechend der ID zur entsprechenden Artikeldetailseite Der Punkt hier ist, dass ich

Das Bindchange-Ereignis der Swiper-Komponente

verwendet habe, um den Array-Index der aktuellen Informationen zu erhalten, wodurch der ID-Wert der Bindungsinformationen der Ansichtsschaltfläche dynamisch geändert wird 🎜> Wenn Sie immer noch nichts verstehen, sind Sie herzlich willkommen, der WeChat Mini-Programmentwicklungs-Kommunikationsgruppe (173683895) beizutreten.

Zwei: Rendering:

Drei: Vollständiger Quellcode

1. Eingekapselt in eine Komponente:

<!-- //滚动 --> 
<template name="roll"> 
 <block> 
   <navigator url=&#39;../details/details2/detail2?artical_id={{newsId}}&#39;> 
    <view class=&#39;chakan&#39;>查看</view> 
   </navigator> 
  <view class=&#39;sx_lunbo page_row&#39;> 
   <text class=&#39;red&#39;>公告</text> 
   <swiper class=&#39;sx_swiper page_row&#39; autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId=&#39;{{item.id}}&#39; circular> 
    <swiper-item wx:for="{{news}}" wx:key=""> 
     <view class=&#39;reds&#39;>{{item.title}} 
     </view> 
    </swiper-item> 
   </swiper> 
  </view> 
 </block> 
</template>

.sx_lunbo { 
 width: 100%; 
 height: 60rpx; 
 border-bottom: solid 1px #eee; 
} 
.chakan{ 
 padding-left: 25rpx; 
 right: 20rpx; 
 clear: both; 
 position:absolute;  
 height: 40rpx; 
 margin-top: 10rpx; 
 color: #f63; 
 border:solid 1px #f63; 
 border-radius:5rpx; 
 padding: 0rpx 10rpx 0rpx 10rpx; 
 font-size: 28rpx 
} 
.sx_swiper { 
 width: 550rpx; 
 margin-top: 10rpx; 
} 
.sx_swiper swiper-item{ 
  height: 40rpx 
 } 
.reds { 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space:nowrap; 
 width:500rpx; 
 font-size: 28rpx; 
 height: 40rpx; 
} 
.red { 
 font-size: 24rpx; 
 color: white; 
 width: 60rpx; 
 height: 40rpx; 
 line-height: 40rpx; 
 background: blue; 
 padding-left: 10rpx; 
 margin: 10rpx; 
 border-radius: 10rpx; 
}

2. Auf der Seite aufgerufen:

<import src="../template/roll/roll.wxml" /> 
<template is="roll" data="{{news,newsId}}" />

@import "../template/roll/roll.wxss";

3 🎜>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JS Reflection and Dependency Injection Use Case Analysis

So entwickeln Sie Verifizierungscodes innerhalb von WeChat Mini- Programme Passwort-Eingabefeldfunktion

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Laufschrifteffekt im WeChat-Miniprogramm (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!