Exemple d'applet WeChat : Comment obtenir l'effet d'animation du chapiteau (avec code)

Le contenu de cet article concerne l'exemple d'applet WeChat : comment réaliser l'effet d'animation du chapiteau (avec du code). Il a une certaine valeur de référence. J'espère que cela sera utile. vous. aider.

1 : Introduction et explication de la fonction

L'effet du chapiteau (le titre de l'article est affiché dans le chapiteau), et il y a un bouton pour voir l'article sur le côté droit, le bouton est lié Déterminez l'ID des informations actuelles du ticker et cliquez sur le bouton pour accéder à la page de détails de l'article correspondante en fonction de l'ID

Le point remarquable ici est que j'ai utilisé l'événement bindchange ; du composant swiper pour obtenir le tableau des informations actuelles. L'indice réalise l'effet de changer dynamiquement la valeur d'ID des informations de liaison du bouton d'affichage

2 : Code source complet

1. Encapsulé dans un composant :

<!-- //滚动 --> 
<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. Appel sur la page :

<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 Données .news :

Recommandations associées :

Exemple d'applet WeChat : l'effet de fonction de collecte d'images non préférées et de changement d'images

Applet WeChat Exemple : Comment implémenter un sélecteur coulissant (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!