Maison > Applet WeChat > Développement de mini-programmes > Exemple d'applet WeChat : Comment obtenir l'effet d'animation du chapiteau (avec code)

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

不言
Libérer: 2018-08-10 15:20:46
original
3646 Les gens l'ont consulté

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>
Copier après la connexion

.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; 
}
Copier après la connexion

2. Appel sur la page :

<import src="../template/roll/roll.wxml" /> 
<template is="roll" data="{{news,newsId}}" />
Copier après la connexion

@import "../template/roll/roll.wxss";
Copier après la connexion

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

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal