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

Fünf Möglichkeiten zur Implementierung der Vererbung in js

Ausleihen von Konstruktoren Die Grundidee dieser ...

Was ist COLLATE in MYSQL?

Vorwort Führen Sie den Befehl show create table &...

Eine kurze Einführung in das bionische Design im Internet-Webdesign

Beim Stichwort Bionik-Design denken viele an die E...

TypeScript-Problem beim Iterieren über Objekteigenschaften

Inhaltsverzeichnis 1. Problem 2. Lösung 1. Deklar...

Implementierung der Leistungsoptimierung des Element-Shuttle-Frames

Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...

Einfache Methode zur Installation von MySQL unter Linux

Bei der Onlinesuche nach Methoden zur Installatio...

So lassen Sie eine Remoteverbindung in MySql zu

So lassen Sie eine Remoteverbindung in MySql zu U...

Designtheorie: Zehn Tipps zur Inhaltspräsentation

<br /> Der Entwurf einer persönlichen Schrei...

So verhindern Sie doppelte Übermittlungen in einem JQuery-Projekt

In neuen Projekten kann Axios doppelte Übermittlu...

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...

Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren

Hinweis: Sie können keine bereichsbezogenen Anima...