Exemples de code pour l'interface de bienvenue du développement de mini-programmes

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 imgs

tableau est préparé dans les données Les adresses de 3 images sont stockées dans le tableau. > Fonction , cette fonction permet de surveiller l'événement clic 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. l'implémentation du style

swiper consiste à définir le style du contrôle

coulissant

 : la position du contrôle coulissant est une disposition absolue, et la largeur et la hauteur doivent occuper le écran entier .swiper- Le style d'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

Le bouton-img. style est le style qui définit le bouton du bouton : la position est une disposition absolue, à 90px du bas, et la transparence est de 0,9

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

[Recommandations associées]

1 Téléchargement du code source du programme WeChat Mini

2. Démo du mini programme WeChat : Yangtao

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!