Beispiel für ein WeChat-Applet: So erzielen Sie den Animationseffekt des Festzelts (mit Code)

Der Inhalt dieses Artikels befasst sich mit dem WeChat-Applet-Beispiel: Wie man den Animationseffekt des Festzelts realisiert (mit Code). Ich hoffe, dass es für Freunde in Not hilfreich ist du hilfst.

1: Einführung und Erklärung der Funktion

Die Wirkung des Laufschriftbereichs (der Titel des Artikels wird im Laufschriftbereich angezeigt), und es gibt eine Schaltfläche zum Anzeigen des Artikels Auf der rechten Seite ist die Schaltfläche gebunden. Bestimmen Sie die ID der aktuellen Tickerinformationen und klicken Sie auf die Schaltfläche, um entsprechend der ID zur entsprechenden Artikeldetailseite zu springen.

Der bemerkenswerte Punkt hier ist, dass ich das Bindchange-Ereignis verwendet habe der Swiper-Komponente, um das Array aktueller Informationen zu erhalten, um den ID-Wert der Bindungsinformationen der Ansichtsschaltfläche dynamisch zu ändern

2: 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. Aufruf auf der Seite:

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

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

newsId: function (e) { 
 var that = this 
 var item = e.detail.current; 
 this.setData({ 
  newsId:that.data.news[item].id 
 }) 
},

3.Nachrichtendaten:

Verwandte Empfehlungen:

Beispiel für das WeChat Mini-Programm: Sammlung und unerwünschte Bilder und die funktionalen Auswirkungen des Bildwechsels

Beispiel für ein WeChat Mini-Programm: So implementieren Sie einen Schiebeselektor (mit Code)

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat-Applet: So erzielen Sie den Animationseffekt des Festzelts (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!