Introduction au développement de l'interface de bienvenue du programme WeChat Mini

Cet article présente principalement les informations pertinentes sur les exemples détaillés de développement de l'interface de bienvenue de l'applet WeChat. Voici un exemple simple de l'interface de bienvenue, du code d'implémentation et des rendus d'implémentation auxquels les amis dans le besoin peuvent se référer. it

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

Dans WeChat lien Bluetooth applet

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!