Teilen Sie Beispielcode für die Entwicklung der WeChat-Applet-Willkommensschnittstelle

Dieser Artikel enthält hauptsächlich relevante Informationen zum Beispielcode für die Entwicklung der Willkommensschnittstelle des WeChat-Applets. Hier ist ein einfaches Beispiel der Willkommensschnittstelle und des Implementierungscodes sowie der Implementierungsdarstellungen 🎜>

Willkommensschnittstelle des WeChat Mini-Programms

Die meisten Apps auf dem Markt verfügen über eine Willkommensschnittstelle. Im Folgenden wird gezeigt, wie eine Willkommensschnittstelle über das WeChat Mini-Programm implementiert wird.

Das Folgende wird in der folgenden Reihenfolge vorgestellt:

Die Implementierung des Layouts

Logische Implementierung von

Stilimplementierung

1. Implementierung des Layouts

Das gesamte Layout wird mithilfe der Swiper-Slide-Ansicht implementiert. Der Block enthält jedes Element der Sliding-Ansicht. Das Element enthält Bildbilder und Schaltflächen >

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

Ein imgs-Array wird in Daten vorbereitet und die Adressen von 3 Bildern werden hier gespeichert Es gibt auch eine Startfunktion, mit der das Klickereignis der Schaltfläche auf der Benutzeroberfläche überwacht wird. Die Funktion der wx.navigateTo-API besteht darin, einen Schnittstellensprung zu implementieren und über eine Zurück-Schaltfläche zu verfügen. Die URL wird verwendet, um die Sprungschnittstelle anzugeben

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

Der Swiper-Stil ist der Stil, der das Schiebesteuerelement definiert: Die Position des Schiebesteuerelements ist ein absolutes Layout, und die Breite und Höhe sind um den gesamten Bildschirm einzunehmen .swiper-image style ist der Stil, der das Bildbild definiert: Breite und Höhe sollen den gesamten Bildschirm einnehmen und die Transparenz beträgt 0,9

.button- img-Stil ist der Stil, der die Schaltflächenschaltfläche definiert: Die Position ist das absolute Layout, 90 Pixel von unten, Transparenz 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. Sehen Sie sich den Effekt an

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispielcode für die Entwicklung der WeChat-Applet-Willkommensschnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!