So implementieren Sie die Vorschaufunktion zur Bildvergrößerung im WeChat-Applet

小云云
Freigeben: 2017-11-29 10:53:07
Original
10626 Leute haben es durchsucht

WeChat-Miniprogramme werden immer beliebter und Programmierer werden ständig mit der Entwicklung von WeChat-Miniprogrammen vertraut gemacht. In diesem Artikel zeigen wir Ihnen ein WeChat-Miniprogramm: Wenn Sie auf ein Bild klicken, wird das aktuelle Bild angezeigt kann vergrößert und in der Vorschau angezeigt werden, und Sie können es nach links oder rechts verschieben.

Implementierungsmethode: WeChat-Applet-Bildvorschauschnittstelle verwenden

Anhand der folgenden Datenliste können wir erkennen, dass die API jeweils zwei Parameter benötigt und data-src werden an js

wxml-Code:

<!--图片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
<image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>
Nach dem Login kopieren

js-Code:

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
  current: src, // 当前显示图片的http链接
  urls: imgList // 需要预览的图片http链接列表
 })
 }
Nach dem Login kopieren

übergeben 1. Fügen Sie dem Bild ein Klickereignis (imgYu) hinzu

2. Verwenden Sie den Attributnamen event.currentTarget.dataset.custom, um den Wert von data- zu erhalten. Zum Beispiel event.currentTarget.dataset.src (erhalten Sie den Wert von data-src)

3. Geben Sie dann die beiden erhaltenen Werte in die wx.previewImage-Schnittstelle ein.

Folgen Sie den obigen Anweisungen Führen Sie einige praktische Operationen am Inhalt durch, und Sie können die Vorschau des Bildes vergrößern und es nach links und rechts verschieben. Lassen Sie uns das schnell tun.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Vorschaufunktion zur Bildvergrößerung im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!