WeChat 애플릿에서 이미지 확대 미리보기 기능을 구현하는 방법

WeChat 미니 프로그램이 점점 인기를 얻고 있으며 프로그래머들은 WeChat 미니 프로그램 개발에 지속적으로 노출되고 있습니다. 이 기사에서는 WeChat 미니 프로그램에 대해 설명합니다. 사진을 클릭하면 현재 사진이 확대됩니다. 미리보기가 가능하며 왼쪽과 오른쪽으로 슬라이드할 수 있습니다.

구현 방법: WeChat 애플릿 이미지 미리보기 인터페이스 사용

API에는 두 개의 매개변수가 필요하며 각각 다음 data-list 및 data-src

wxml 코드를 통해 js에 전달되는 것을 볼 수 있습니다.

<!--图片描述-->
<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. event.currentTarget.dataset.custom 속성 이름을 사용하여 데이터 값을 가져옵니다. event.currentTarget.dataset.src(data-src 값 가져오기)

3. 그런 다음 얻은 두 값을 wx.previewImage 인터페이스에 넣습니다.

위 내용을 따라 실행해 보겠습니다. 사진 미리보기도 확대되고, 좌우로 슬라이드도 가능하니 서둘러 해보세요.

위 내용은 WeChat 애플릿에서 이미지 확대 미리보기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!