Das WeChat-Applet wählt die Bildsteuerung

Das WeChat-Applet wählt die Bildsteuerung

In diesem Artikelbeispiel wird der spezifische Code zur Auswahl des Bildsteuerelements im WeChat-Applet zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

xml:

<wird geladen, versteckt="{{loadingHidden}}">
 Laden...
</wird geladen>
<Ansichtsklasse="add_carimg">
 <block>
 <Ansichtsklasse="load_iamge">
 <text class="load_head_text">Fotos von Baufahrzeugen hochladen</text>
 <text class="load_foot_text">{{imgbox.length}}/2</text>
 </Ansicht>
 <Ansichtsklasse='Seiten'>
 <Ansichtsklasse="images_box">
 <block wx:key="imgbox" wx:for="{{imgbox}}">
  <Ansichtsklasse='Bildbox'>
  <image class='img' src='{{item}}' data-message="{{item}}" bindtap="imgYu"></image>
  <view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
  <image class='img' src='/pages/images/delete_btn.png'></image>
  </Ansicht>
  </Ansicht>
 </block>
 <view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<2}}">
  <Bild Klasse = 'img' src = '/pages/images/load_image.png'></Bild>
 </Ansicht>
 </Ansicht>
 </Ansicht>
 </block>
</Ansicht>
<Ansicht>
 <button class="work_btn" bindtap="shanggang">Zur Arbeit gehen</button>
</Ansicht>

CSS:

.work_btn {
 Breite: 60%;
 Höhe: 35px;
 Zeilenhöhe: 35px;
 Rand oben: 15px;
 Rahmenradius: 5px;
 Schriftgröße: 30rpx;
 Farbe: weiß;
 Hintergrundfarbe: rgb(2, 218, 247);
}
 
.work_btn:aktiv {
 Breite: 60%;
 Höhe: 35px;
 Zeilenhöhe: 35px;
 Rand oben: 15px;
 Rahmenradius: 5px;
 Schriftgröße: 30rpx;
 Farbe: weiß;
 Hintergrundfarbe: rgb(151, 222, 231);
}
 
/************/
 
.Bild laden {
 Breite: 100 %;
 Höhe: 30px;
 Rand oben: 10px;
 Anzeige: Flex;
 Flex-Richtung: Reihe;
}
 
.Kopftext laden {
 Breite: 95 %;
 Höhe: 20px;
 Rand unten: 5px;
 Rand oben: 5px;
 
 
}
 
.load_foot_text {
 Breite: 5%;
 Höhe: 20px;
 Rand rechts: 15px;
 Rand oben: 5px;
 Rand unten: 5px;
 schweben: rechts;
 
}
 
.Seiten {
 Breite: 98 %;
 Rand: automatisch;
 Überlauf: versteckt;
}
 
/* Bild*/
.images_box {
 Breite: 100 %;
 Anzeige: Flex;
 Flex-Richtung: Reihe;
 Flex-Wrap: Umwickeln;
 Inhalt ausrichten: Flex-Start;
 Hintergrundfarbe: weiß;
}
 
.img-box {
 Rand: 2rpx;
 Rahmenstil: durchgezogen;
 Rahmenfarbe: rgba (170, 167, 167, 0,452);
 Breite: 200rpx;
 Höhe: 200rpx;
 Rand links: 35rpx;
 Rand oben: 20rpx;
 Rand unten: 20rpx;
 Position: relativ;
}
 
/* Bild löschen */
.img-Auswahl {
 Breite: 50rpx;
 Höhe: 50rpx;
 Randradius: 50 %;
 Position: absolut;
 rechts: -20rpx;
 oben: -20rpx;
}
 
.img {
 Breite: 100 %;
 Höhe: 100%;
}

javascript - Argumente:

Seite({
 
 /**
 * Ausgangsdaten der Seite */
 Daten: {
 tempFilePaths: '',
 imgbox: [], //Bild auswählen fileIDs: [], //Rückgabewert nach dem Hochladen in den Cloud-Speicher src: 0,
 },
 
 onLoad: Funktion (Optionen) {
 
 
 },
 //Bildklickereignis imgYu: function (event) {
 var das = dies;
 
 console.log(event.target.dataset.message + "was ist das");
 var src = Ereignis.Ziel.Datensatz.Nachricht;
 //Bildvorschau wx.previewImage({
 current: src, // Der http-Link des aktuell angezeigten Bildes urls: [src] // Die Liste der http-Links der Bilder, die in der Vorschau angezeigt werden sollen})
 }, // Foto löschen&&
 imgDelete1: Funktion (e) {
 lass das = dies;
 let index = e.currentTarget.dataset.deindex;
 lass imgbox = diese.daten.imgbox;
 imgbox.splice(index, 1)
 dass.setData({
 Bildbox:Bildbox
 });
 },
 // Foto löschen&&
 imgDelete1: Funktion (e) {
 lass das = dies;
 let index = e.currentTarget.dataset.deindex;
 lass imgbox = diese.daten.imgbox;
 imgbox.splice(index, 1)
 dass.setData({
 Bildbox:Bildbox
 });
 },
 //Bild auswählen&&&
 addPic1: Funktion (e) {
 var imgbox = diese.data.imgbox;
 Konsole.log(Bildbox)
 var das = dies;
 var n = 2;
 wenn (2 > imgbox.length > 0) {
 n = 2 - Bildbox.Länge;
 } sonst wenn (imgbox.length == 2) {
 n = 1;
 }
 wx.wählenBild({
 count: n, // Standard ist 9, legen Sie die Anzahl der Bilder fest sizeType: ['original', 'compressed'], // Sie können angeben, ob es sich um das Originalbild oder das komprimierte Bild handelt, beide sind standardmäßig verfügbar sourceType: ['album', 'camera'], // Sie können angeben, ob die Quelle das Album oder die Kamera ist, beide sind standardmäßig verfügbar success: function (res) {
  // konsole.log(res.tempFilePaths)
  // Gibt eine Liste lokaler Dateipfade für die ausgewählten Fotos zurück. tempFilePath kann als src-Attribut des img-Tags verwendet werden, um das Bild anzuzeigen var tempFilePaths = res.tempFilePaths
  console.log('Pfad' + tempFilePaths);
  wenn (imgbox.length == 0) {
  imgbox = temporäreDateipfade
  } sonst wenn (2 > imgbox.length) {
  imgbox = imgbox.concat(tempFilePaths);
  }
  dass.setData({
  Bildbox: Bildbox,
  imgnum: imgbox.länge
  });
 }
 })
 },
 
 //Bild imgbox: function (e) {
 dies.setData({
 imgbox: e.detail.wert
 })
 },
 
})

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet implementiert eine Bildauswahl- und Vorschaufunktion
  • So verwenden Sie das WeChat-Applet „chooseImage“ (wählen Sie ein Bild aus dem lokalen Album aus oder machen Sie ein Foto mit der Kamera)
  • Implementierungsmethode zum Zuschneiden des Bildauswahlbereichs des WeChat-Applets
  • Das WeChat-Applet wählt Bilder aus und vergrößert die Bildvorschaufunktion
  • Implementierungsbeispiel für das WeChat-Applet „Bildauswahl, Hochladen auf den Server, Vorschau (PHP)“
  • Das WeChat-Applet chooseImage wählt ein Bild aus oder macht ein Foto
  • WeChat Mini-Programm - Machen Sie ein Foto oder wählen Sie ein Bild aus und laden Sie eine Datei hoch

<<:  So leiten Sie den Nginx-Verzeichnispfad um

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)

Artikel empfehlen

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux

Vorwort Der Befehl mv ist die Abkürzung für move ...

Neues CSS3-Layout: ausführliche Flex-Erklärung

Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...

So verhindern Sie, dass Website-Inhalte in Suchmaschinen aufgenommen werden

Normalerweise besteht das Ziel beim Erstellen ein...

Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue

Einführung Während des Front-End-Projektentwicklu...

So zeigen Sie den Prozentsatz und die ersten paar Prozent in MySQL an

Inhaltsverzeichnis Erfordern Implementierungscode...

MYSQL METADATA LOCK (MDL LOCK) Theorie und Sperrtyptest

Inhaltsverzeichnis MYSQL METADATA LOCK (MDL LOCK)...

Üben Sie die Verwendung von Golang, um mit der Docker-API zu spielen

Inhaltsverzeichnis Installieren des SDK Lokalen D...

Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

Beschreibung des Phänomens: Das Projekt verwendet...

JS implementiert das Schere-Stein-Papier-Spiel

In diesem Artikelbeispiel wird der spezifische JS...

Installation, Aktivierung und Konfiguration von ModSecurity unter Apache

ModSecurity ist ein leistungsstarkes Paketfiltert...

Eine kurze Analyse von MySQL - MVCC

Versionskette In den Tabellen der InnoDB-Engine g...

Grundlegendes zu MySQL-Clusterindizes und wie Clusterindizes wachsen

In dieser Anmerkung beschreiben wir kurz Was ist ...