위 챗 애플 릿 에서 그림 선택 및 미리 보기 기능 확대

영상 에서 선생님 도 공식 문 서 를 보고 학생 들 에 게 설명 을 해 주 었 고 위 챗 은 체계 적 인 방법 으로 그림 을 선택 했다.wx.chooseImage({})이 방법 은 그림 을 선택 하 는 방법 으로 다음 과 같이 구체 적 으로 사용 합 니 다.

 data: {
  avatarUrl:null
 },

먼저 데이터 에서 데 이 터 를 받 는 변 수 를 정의 한 다음 방법 으로 그림 을 선택 하여 그림 을 표시 합 니 다.

bindViewTap:function(){
  var that = this;
  wx.chooseImage({
  //              ，  9,         ,     //         ,
   count: 1, 
   sizeType: ['original', 'compressed'], // original   ，compressed    ，      
   sourceType: ['album', 'camera'], // album      ，camera     ，      
   success: function(res){
    //     ,              
    var tempFilePaths = res.tempFilePaths;
    that.setData({
    //           data       
     avatarUrl:tempFilePaths
    })
   },
   fail: function(res) {
    // fail
   },
   complete: function(res) {
    // complete
   }
  })
 }

이 때 우리 가 정의 하 는 전역 변수,즉 data 의 url 입 니 다.이미 값 이 있 습 니 다.이 제 는 페이지 에 만 표시 하면 됩 니 다.

//              ,         image   
 <button bindtap="bindViewTap" type="submit">    </button>
<image src="{{avatarUrl}}"></image>

다 중 선택 이 라면 표시 할 때 데이터 원본 을 직접 표시 하지 말 아야 합 니 다.잘못 보 고 될 수 있 습 니 다.배열 로 돌아 가기 때 문 입 니 다.

<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>

그림 미리 보기:
다음 그림 미리 보기:
우선 data 에서 데이터 원본 을 정의 합 니 다:

data:{
  avatarUrl:null,
  pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
   'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
   'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
   'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
   'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
   'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
   'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
   'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
  ]
 },

그리고 preview Image 방법 을 만 들 고 그림 미리 보 기 를 실현 합 니 다.

 previewImage: function(e){
  var that = this,
  //         
    index = e.currentTarget.dataset.index,
    //   
    pictures = this.data.pictures;
  wx.previewImage({
  //      
   current: pictures[index],
   //   
   urls: pictures
  })
 }

그리고 페이지 에 데 이 터 를 옮 겨 다 니 며 표시 합 니 다.

<view>
 <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

먼저 목록 에 모든 그림 을 표시 하고 미리 보기 방법 을 바 인 딩 하 며 그림 을 클릭 하여 좌우 미리 보기 합 니 다.
다음은 위 챗 애플 릿 이미지 확대 미리 보기 기능 을 보충 하고 구체 적 인 내용 은 다음 과 같다.
필요:그림 을 클릭 할 때 현재 그림 은 미리 보 기 를 확대 하고 좌우 로 미 끄 러 질 수 있 습 니 다.

구현 방식:위 챗 애플 릿 그림 미리 보기 인터페이스 사용

api 는 두 개의 인자 가 필요 합 니 다.각각 아래 의 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.사용event.currentTarget.dataset사용자 정의 속성 이름   데이터-의 값 을 가 져 옵 니 다event.currentTarget.dataset.src  (데이터-src 의 값 가 져 오기)
3.가 져 온 두 값 을 wx.preview Image 인터페이스 에 넣 으 면 됩 니 다.
효과 그림 은 다음 과 같 습 니 다.

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 위 챗 애플 릿 에서 그림 을 선택 하고 미리 보기 기능 을 확대 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!