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 mise en œuvre de la mise en page

Implémentation logique de

Implémentation du style

1. Implémentation de la mise en page

  <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>

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

  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!