Comment créer un effet de chapiteau dans le mini programme WeChat (avec code)

Cette fois, je vais vous montrer comment créer un effet de chapiteau dans le mini programme WeChat (avec code). Quelles sont les précautions pour créer l'effet de chapiteau dans le mini programme WeChat. Voici des cas pratiques. . Jetons un coup d'oeil.

1 : Introduction et explication de la fonction

L'effet du chapiteau (le titre de l'article est affiché dans le chapiteau), et sur à droite Il y a un bouton pour afficher les articles. Le bouton est lié à l'ID des informations du ticker actuel. Après avoir cliqué sur le bouton, vous accéderez à la page de détails de l'article correspondante en fonction de l'ID

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

Si vous ne comprenez toujours rien, n'hésitez pas à rejoindre (173683895) le groupe de communication sur le développement du mini programme WeChat.

Deux : Rendu :

Trois : Code source complet

1. Encapsuler 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. Appeler 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 d'actualité :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture recommandée :

Analyse de cas d'utilisation de la réflexion et de l'injection de dépendances JS

Comment développer des codes de vérification dans les mini-programmes WeChat Fonction de boîte de saisie de mot de passe

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!