WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

WeChat-Applet implementiert Suchfunktion und springt zur Suchergebnisseite

Suchseite:

search.wxml-Seite:

    <view class="form">
      <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="Bitte geben Sie das Suchwort ein" type="text" />
    </Ansicht>

search.wxss-Stil:

.bilden {
  Position: relativ;
  Höhe: 40px;
}
 
.searchInput {
  Rand: 1px durchgezogen #2c3036;
  Höhe: 40px;
  Zeilenhöhe: 40px;
  Schriftgröße: 14px;
  Rahmenradius: 20px;
  Farbe: #bebec4;
  Polsterung links: 35px;
}

suche.js:

  // SuchegoSearch: function(e) {
    var das = dies;
    var formData = e.detail.value;
    if (formData) {
 
      wx.Anfrage({
 
        URL: „https://xxxxx/homepage/search“,
        Daten: {
          Titel: Formulardaten
        },
 
        Kopfzeile: {
          „Inhaltstyp“: „Anwendung/json“
        },
        Erfolg: Funktion (Res) {
          dass.setData({
            Suche: res.data,
          })
          if (res.data.msg=='Kein zugehöriges Video'){
            wx.showToast({
              Titel: „Keine verwandten Videos“,
              Symbol: „keine“,
              Dauer: 1500
            })
          }anders{
            let str = JSON.stringify(res.data.result.data);
            wx.navigateTo({
              URL: '../searchShow/searchShow?data=' + str
            })
          }
          
          // konsole.log(res.data.msg)
        }
      })
    } anders {
 
      wx.showToast({
        Titel: 'Eingabe darf nicht leer sein',
        Symbol: „keine“,
        Dauer: 1500
      })
 
    }
  }

Suchergebnisse:

searchShow.wxml-Seite:

<Klasse anzeigen="Container">
  <view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
    <Ansichtsklasse="ListeHaupt">
      <navigator url='../videoShow/videoShow?id={{item.id}}'>
        <image src="{{item.image}}" mode="widthFix"></image>
        <Ansichtsklasse='Listentitel'>
          <Ansichtsklasse="listSubtitle">
            <text>{{item.title}}</text>
          </Ansicht>
          <Klasse anzeigen="Listentext">
            <text>{{item.description}}</text>
          </Ansicht>
        </Ansicht>
      </navigator>
    </Ansicht>
  </Ansicht>
</Ansicht>

searchShow.js

  beim Laden: Funktion (Optionen) {
    let searchShow = JSON.parse(options.data);
    lass das = dies
    dass.setData({
      SucheAnzeigen: SucheAnzeigen
    })
    console.log(suchenAnzeigen)
  },

Dies ist das Ende dieses Artikels über die Implementierung der Suchfunktion und das Springen zur Suchergebnisseite in WeChat-Miniprogrammen. Weitere verwandte Miniprogramme zum Implementieren von Such- und Sprunginhalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • WeChat-Applet implementiert Suchfeldfunktion
  • Beispielcode zum Hervorheben von Suchbegriffen im WeChat-Miniprogramm
  • Suchfeldstil des WeChat-Applets und Springen zur Suchseite (Applet-Suchfunktion)
  • Implementierung der Suchfunktion für die Entwicklung des WeChat-Applets (Frontend + Backend + Datenbank)
  • So implementieren Sie die Dropdown-Feld-Suchfunktion im WeChat-Applet
  • Mini-Programm implementiert Suchoberfläche Mini-Programm implementiert empfohlenen Suchlisteneffekt
  • Das WeChat-Applet ermöglicht die Suche nach Restaurants und Hotels in der Nähe bestimmter Sehenswürdigkeiten

<<:  Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

>>:  So migrieren Sie das Datenverzeichnis in Docker

Artikel empfehlen

js regulärer Ausdruck Lookahead und Lookbehind und nicht erfassende Gruppierung

Inhaltsverzeichnis Kombinieren von Lookahead und ...

Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design

Beim Erstellen einer Website treten immer wieder P...

Empfohlene 20 besten kostenlosen englischen Handschrift-Schriftarten

Jellyka BeesAntike Handschrift [Ank]* Jellyka Cutt...

Sechs Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten

Zweitens hängt das Ranking von Schlüsselwörtern au...

Beispiel für die Verwendung von Dockerfile zum Erstellen eines Nginx-Images

Einführung in Dockerfile Docker kann automatisch ...

Beispielcode für HTML-Layered-Box-Shadow-Effekt

Schauen wir uns zunächst das Bild an: Heute werde...

Beispiel für die Installation von Kong Gateway in Docker

1. Erstellen Sie ein Docker-Netzwerk Docker-Netzw...

Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

MySQL-Join-Abfrage (Left Join, Right Join, Inner Join)

1. Allgemeine Verbindungen für MySQL INNER JOIN (...

Beispielanalyse der Verwendung von Dockerfile-Textdateien

Dockerfile ist eine Textdatei, die zum Erstellen ...

Zwei Boxmodelle in Webseiten (W3C-Boxmodell, IE-Boxmodell)

Es gibt zwei Arten von Webseiten-Boxmodellen: 1: S...