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

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

In diesem Artikel erfahren Sie mehr über einen pr...

Es ist ganz einfach zu verstehen, was Node.js ist

Inhaltsverzeichnis Offizielle Einführung in Node....

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Kurzbeschreibung Der Editor hat häufig Probleme m...

js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen

Heute werden wir einen einfachen Fall durchgehen ...

5 Möglichkeiten, um festzustellen, ob ein Objekt in JS ein leeres Objekt ist

1. Konvertieren Sie das JSON-Objekt in eine JSON-...

Beispielcode für CSS-Pseudoklassen zum Ändern des Eingabeauswahlstils

Hinweis: Diese Tabelle ist aus dem W3School-Tutor...

Beispiel für die Implementierung eines Skeleton-Bildschirms mit Vue

Inhaltsverzeichnis Verwendung des Skelettbildschi...

Reine JS-Methode zum Exportieren von Tabellen nach Excel

html <div > <button type="button&qu...

Vue realisiert den Logistik-Timeline-Effekt

In diesem Artikelbeispiel wird der spezifische Co...