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

Das neueste Installations-Tutorial für virtuelle Maschinen VMware 14

Zuerst gebe ich Ihnen den Aktivierungscode für VM...

Detaillierte Erklärung der Docker-Nutzung unter CentOS8

1. Installation von Docker unter CentOS8 curl htt...

So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

Inhaltsverzeichnis 1. Der Unterschied zwischen Üb...

So migrieren Sie das Datenverzeichnis in mysql8.0.20

Das Standardspeicherverzeichnis von MySQL ist /va...

4 Möglichkeiten zum Anzeigen von Prozessen in LINUX (Zusammenfassung)

Ein Prozess ist ein Programmcode, der in der CPU ...

jQuery erzielt einen atmenden Karusselleffekt

In diesem Artikel wird der spezifische Code von j...

Native JS-Kapselung vue Tab-Umschalteffekt

In diesem Artikelbeispiel wird der spezifische Co...

Lösen Sie das Problem des Vergessens von Passwörtern in MySQL 5.7 unter Linux

1. Problem Passwort für mysql5.7 unter Linux verg...

Verwenden Sie js in html, um die lokale Systemzeit abzurufen

Code kopieren Der Code lautet wie folgt: <div ...