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

JavaScript zum Erzielen eines Dropdown-Menüeffekts

Verwenden Sie Javascript, um ein Dropdown-Menü zu...

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Inhaltsverzeichnis Vorwort Vorbereitende Vorberei...

Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL

Inhaltsverzeichnis Zum Beispiel: Allgemeines Schr...

Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework

Vorwort Als Front-End-Framework, das „für große F...

CSS3 zum Erzielen von Zeitleisteneffekten

Als ich kürzlich meinen Computer einschaltete, sa...

11 Linux-KDE-Anwendungen, die Sie nicht kannten

KDE Abkürzung für Kool Desktop Environment. Eine ...

Concat() von kombinierten Feldern in MySQL

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

Beispiel für die CSS3-Clear-Float-Methode

1. Zweck Durch diesen Artikel kann jeder die Prin...