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

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>

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链接列表
 })
 }

ü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!