Das WeChat-Applet realisiert ein Verknüpfungsmenü

<!-- Linke Bildlaufleiste-->
<Ansichtsklasse = "Gesamt">
<Ansichtsklasse='Unterlinie'></Ansicht>
<Ansichtsstil='float: left' Klasse='left'>
  <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='Höhe: {{winHeight}}px'>
    <Ansichtsklasse='alles klar'>
      <block wx:key="Listen" wx:for="{{Listen}}">
        <view bindtap='jumpIndex' data-menuindex='{{index}}'>
          <Ansichtsklasse='Textstil'>
            <text class="{{indexId==index?'active1':''}}">{{item}}</text>
            <text class="{{indexId==index?'active':''}}"></text>
          </Ansicht>
        </Ansicht>
      </block>
    </Ansicht>
  </scroll-ansicht>
</Ansicht>

<!--Rechte Spalte-->
<Ansichtsklasse="rechts">
    <!--Bestimmen Sie den IndexId-Wert, um unterschiedliche Seiten anzuzeigen-->
     <Ansicht wx:if="{{indexId==0}}">
        <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='Höhe: {{winHeight}}px'>
        <Ansichtsklasse='alles klar'>
        <block wx:key="lists_r0" wx:for="{{lists_r0}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <Ansichtsklasse='Textstil2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </Ansicht>
        </Ansicht>
        </block>
        </Ansicht>
        </scroll-ansicht>
      </Ansicht>

      <Ansicht wx:if="{{indexId==1}}">
      <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='Höhe: {{winHeight}}px'>
        <Ansichtsklasse='alles klar'>
        <block wx:key="lists_r1" wx:for="{{lists_r1}}">
        <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
          <Ansichtsklasse='Textstil2'>
            <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
            <text class="{{indexIdr0==index?'active3':''}}"></text>
          </Ansicht>
        </Ansicht>
        </block>
        </Ansicht>
        </scroll-ansicht>
      </Ansicht>
      
     </Ansicht>
</Ansicht>

.unterstreichen{
  Breite: 100 %;
  Rahmen oben: 1rpx durchgezogen #efefef;
}

.links {
  Rahmen oben: 1rpx durchgezogen #efefef;
  Rand rechts: 1rpx durchgezogen #efefef;
}
 
.text-stil {
  Breite: 200rpx;
  Höhe: 140rpx;
  Zeilenhöhe: 140rpx;
  Textausrichtung: zentriert;
  Schriftgröße: 34rpx;
  Schriftfamilie: PingFangSC-Semibold;
  Farbe: rgba(51, 51, 51, 1);
}


 
.aktiv3 {
  Anzeige: Block;
  Breite: 500rpx;
  Höhe: 6rpx;
  Hintergrund: rgb(88, 123, 193);
  Position: relativ;
  links: 0rpx;
  unten: 30rpx;
}

.aktiv2 {
  Farbe: RGB (88, 123, 193);
}
 
.aktiv1 {
  Farbe: #96C158;
}
 
.aktiv {
  Anzeige: Block;
  Breite: 50rpx;
  Höhe: 6rpx;
  Hintergrund: #96C158;
  Position: relativ;
  links: 75rpx;
  unten: 30rpx;
}

.scrollY {
  Breite: 210rpx;
  Position: fest;
  links: 0;
  oben: 0;
  Rand rechts: 1rpx durchgezogen #efefef;
}

.Rechts{
  Rahmen oben: 1rpx durchgezogen #efefef;
  Rahmen links: 1rpx durchgezogen rgba(0,0,0,0,0);
  Rand links: 2rpx;
}

.scrollY2 {
  Breite: 520rpx;
  Position: fest;
  rechts: 0;
  oben: 0;
  Rahmen links: 1rpx durchgezogen rgba(0,0,0,0);
  Rand links: 2rpx;
}

.text-style2 {
  Breite: 520rpx;
  Höhe: 140rpx;
  Zeilenhöhe: 140rpx;
  Textausrichtung: links;
  Schriftgröße: 34rpx;
  Schriftfamilie: PingFangSC-Semibold;
  Farbe: rgba(51, 51, 51, 1);
}

.button_call{
  Höhe: 90rpx;
  Breite: 90rpx;
  Position: fest;
  unten: 150rpx;
  rechts: 13rpx;
  Deckkraft: 0,7;
  Z-Index: 100;
}

Seite({
 
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Listen: [
      „Hauptkategorie 1“, „Hauptkategorie 2“, „Hauptkategorie 3“, „Abteilung für studentische Angelegenheiten“, „Abteilung für Parteikomitees“, „Schularbeit und akademische Angelegenheiten“, „Büro für Ruhestandsangelegenheiten“, „Büro für Sicherheit“, „Finanzen und Rechnungsprüfung“, „Labor und Ausrüstung“, „Personalbüro“, „Büro für Sicherheit“, „Hochschule“, „Direkt angeschlossene Einheiten“, „Sonstige“
    ],
    lists_r0: [
      „Unterklasse 1 der Hauptklasse 1“, 
      „Unterkategorie 2 der Hauptkategorie 1“, „Unterkategorie 3 der Hauptkategorie 1“, „Unterkategorie 4 der Hauptkategorie 1“, „Abteilung des Parteikomitees“, „Schulpersonal und Lehrangelegenheiten“, „Ruhestandsbüro“, „Sicherheitsbüro“, „Finanzen und Rechnungsprüfung“, „Labor und Ausrüstung“, „Personalbüro“, „Sicherheitsbüro“, „Hochschule“, „Direkt angeschlossene Einheiten“, „Sonstige“
    ],
    lists_r1: [
      „Unterklasse 1 der Hauptklasse 2“, 
      „Unterklasse 2 der Hauptklasse 2“, „Unterklasse 3 der Hauptklasse 2“, „Unterklasse 4 der Hauptklasse 2“, „Abteilung Parteikomitee“, „Schulpersonal und Lehrangelegenheiten“, „Ruhestandsbüro“, „Sicherheitsbüro“, „Finanzen und Revision“, „Labor und Ausrüstung“, „Personalbüro“, „Sicherheitsbüro“, „Hochschule“, „Direkt angeschlossene Einheiten“, „Sonstige“
    ],
    Index-ID: 0,
    indexIdr0: 0,
    indexIdr0: 1,
  },
  //Linksklick-Ereignis jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex
    lass das = dies
    dass.setData({
      indexId: Index
    });
  },

  SprungIndexR0(e) {
    let index = e.currentTarget.dataset.menuindex
    lass das = dies
    dass.setData({
      indexIdr0: Index
    });
  },


  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  beim Laden: Funktion (Optionen) {
    var das = dies
    wx.getSystemInfo({
      Erfolg: Funktion (Res) {
        dass.setData({
          Fensterhöhe: res.Fensterhöhe
        });
      }
    });
  },
 
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion() {
 
  },
 
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion() {
 
  },
 
  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion() {
 
  },
 
  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion() {
 
  },
 
  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  beiPullDownRefresh: Funktion() {
 
  },
 
  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  bei ErreichenBottom: function() {
 
  },
 
  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion() {
 
  }
})

{
  "usingComponents": { },
  "navigationBarBackgroundColor":"Die gewünschte Hintergrundfarbe",
  "navigationBarTitleText": "Telefonische Anfrage",
  "navigationBarTextStyle":"schwarz",
  "enablePullDownRefresh": wahr
}