Partager un exemple de code pour le développement de l'interface de bienvenue de l'applet WeChat

Cet article partage principalement des informations pertinentes sur l'exemple de code pour le développement de l'interface de bienvenue de l'applet WeChat. Voici un exemple simple de l'interface de bienvenue ainsi que du code d'implémentation et des rendus d'implémentation. Les amis dans le besoin peuvent s'y référer. 🎜>

Interface de bienvenue du programme WeChat Mini

La plupart des applications sur le marché auront une interface de bienvenue. Ce qui suit montrera comment implémenter une interface de bienvenue via le programme WeChat Mini.

Les éléments suivants seront introduits dans l'ordre suivant :

La mise en œuvre de la mise en page

Implémentation logique de

Implémentation du style

1. Implémentation de la mise en page

L'ensemble de la mise en page est implémenté à l'aide de la vue coulissante Swiper. Chaque élément de la vue coulissante est enveloppé par un bloc. Le bloc contient chaque élément de la vue coulissante. L'élément contient des images et des boutons

  <swiper indicator-dots="true">
    <block wx:for="{{imgs}}" wx:for-index="index">
     <swiper-item class="swiper-items" >
      <image class="swiper-image" src="{{item}}"></image>
      <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
     </swiper-item>
    </block>
  </swiper>

2. Implémentation logique

Un tableau imgs est préparé en données, et les adresses de 3 images sont stockées dans le tableau Ici. sont également Il existe une fonction de démarrage, qui est utilisée pour surveiller l'événement de clic du bouton sur l'interface.

La fonction de l'API wx.navigateTo est d'implémenter le saut d'interface et d'avoir un bouton de retour. L'url est utilisée pour spécifier l'interface de saut

<.>

    Page({
    data:{
      imgs:[
        "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
      ],

      img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",
    },

    start(){
       wx.navigateTo({
        url: '../home/home'
      })
      // wx.redirectTo({ url: '../index/index' })
    },


   })

3. Implémentation du style

Le style swiper est le style qui définit le contrôle coulissant : la position du contrôle coulissant est une disposition absolue, et la largeur et la hauteur sont pour occuper tout l'écran

.le style swiper-image est le style qui définit l'image de l'image : la largeur et la hauteur doivent occuper tout l'écran, et la transparence est de 0,9

.button- img style est le style qui définit le bouton du bouton : la position est une disposition absolue, 90px à partir du bas, transparence 0,6, ..

  swiper {
   /*这个是绝对布局*/
   position: absolute;
   height: 100%;
   width: 100%;
  }


  .swiper-image {
   height: 100%;
   width: 100%;
   /*透明度*/
   opacity:0.9;
  }


  .button-img{  
    /*这个是绝对布局*/
    position: relative;
    bottom: 90px;
    height: 40px;
    width: 120px;
    opacity:0.6;
  }

4. Voir l'effet

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

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!