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

Eine kurze Diskussion über JS-Prototypen und Prototypenketten

Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...

MySQL Flush-List und Flushing-Mechanismus für Dirty Pages

1. Überprüfung Der Pufferpool wird nach dem Start...

Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode

Kürzlich habe ich festgestellt, dass die Serverze...

Auszeichnungssprache - Titel

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Detaillierte Einführung in das CSS-Prioritätswissen

Bevor wir über die CSS-Priorität sprechen, müssen...

Textarea-Tag in HTML

<textarea></textarea> wird verwendet,...

Drei Möglichkeiten zum Sperren und Entsperren von Benutzerkonten in Linux

Wenn in Ihrer Organisation bereits eine Kennwortr...

Installations-Tutorial für die komprimierte Version von MySQL 5.7.18 Archiv

In diesem Artikel wird die spezifische Methode zu...

So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Inhaltsverzeichnis Einrichten einer einfachen HTT...

Sicherheitseinstellungen für Windows 2016 Server

Inhaltsverzeichnis Systemupdate-Konfiguration Änd...

Unsere Gedanken zur Karriere als UI-Ingenieur

Ich bin seit langer Zeit depressiv, warum? Vor ein...

50 superpraktische Tools für Webdesigner

Webdesigner zu sein ist nicht einfach. Sie müssen...