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:
|
<<: So leiten Sie den Nginx-Verzeichnispfad um
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)
In diesem Artikel erfahren Sie mehr über einen pr...
Inhaltsverzeichnis Offizielle Einführung in Node....
Dieser Artikel stellt hauptsächlich den Kreisdiag...
Um die Unterstreichung eines Hyperlinks zu entfern...
Kurzbeschreibung Der Editor hat häufig Probleme m...
Vorwort Bei der tatsächlichen Verwendung der Date...
Ein ES-Image vom Docker-Hub heruntergeladen, Vers...
Heute werden wir einen einfachen Fall durchgehen ...
1. Konvertieren Sie das JSON-Objekt in eine JSON-...
Hinweis: Diese Tabelle ist aus dem W3School-Tutor...
Inhaltsverzeichnis Verwendung des Skelettbildschi...
html <div > <button type="button&qu...
Einführung MySQL 5.7 soll der sicherste MySQL-Ser...
In diesem Artikelbeispiel wird der spezifische Co...
1. Einleitung Heute hat mich ein Kollege gefragt,...