WeChatアプレットに画像拡大プレビュー機能を実装する方法

WeChat ミニ プログラムはますます人気が高まっており、プログラマーは常に WeChat ミニ プログラムの開発にさらされています。この記事では、WeChat ミニ プログラムについて説明します。画像をクリックすると、現在の画像が拡大されます。とプレビューすると、左右にスライドできます。

実装方法: WeChat アプレット画像プレビュー インターフェイスを使用

API には 2 つのパラメーターが必要であることがわかります。これらのパラメーターは、それぞれ次の data-list と data-src を通じて js に渡されます

wxml コード:

<!--图片描述-->
<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 コード:

//图片点击事件
 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链接列表
 })
 }

1. 画像にクリック イベント (imgYu) を追加します

2. data-の値を取得するには、event.currentTarget.dataset.custom 属性名を使用します。 event.currentTarget.dataset.src(data-srcの値を取得)など

3. 次に、取得した2つの値をwx.previewImageインターフェースに入れます

上記の内容に従って拡大プレビューを実現してみましょう。写真は左右にスライドできるので、急いで行ってください。

以上がWeChatアプレットに画像拡大プレビュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。