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

Centos7-Installation und Konfiguration von Mysql5.7

Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...

Erfahren Sie mehr über MySQL-Indizes

1. Indexierungsprinzip Indizes werden verwendet, ...

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Dieser Artikel fasst die Implementierungsmethoden...

Docker-Netzwerkprinzipien und detaillierte Analyse benutzerdefinierter Netzwerke

Docker virtualisiert eine Brücke auf dem Host-Rec...

mysql charset=utf8 verstehen Sie wirklich, was es bedeutet

1. Schauen wir uns zunächst eine Anweisung zur Ta...

Ursachen und Lösungen für domänenübergreifende Probleme bei Ajax-Anfragen

Inhaltsverzeichnis 1. Wie entsteht Cross-Domain? ...

So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen

Vorwort Bei der Entwicklung statischer Seiten, wi...

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Szenario Das Unternehmensprojekt wird in Docker b...