uniapp을 사용하여 이미지 미리보기 기능 구현-uni-app-php.cn

uniapp을 사용하여 이미지 미리보기 기능 구현

WBOY

풀어 주다： 2023-11-21 14:33:36

원래의

1774명이 탐색했습니다.

uniapp을 사용하여 이미지 미리보기 기능 구현

최신 소셜 미디어 및 모바일 애플리케이션에서는 이미지 미리보기 기능이 거의 표준입니다. 유니앱에서는 사진 미리보기 기능을 쉽게 구현하고 사용자에게 좋은 경험을 제공할 수 있습니다. 이 기사에서는 uniapp을 사용하여 이미지 미리보기 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

필수 플러그인 가져오기
이미지 미리보기 기능을 구현하려면 uniapp에서 제공하는 uni.previewImage 플러그인을 사용해야 합니다. uniapp 프로젝트에서는 다음 명령을 통해 플러그인을 설치할 수 있습니다.
```
npm install @dcloudio/uni-ui
```
로그인 후 복사
설치가 완료된 후 프로젝트의 main.js 파일을 입력하고 플러그인을 가져온 후 글로벌 컴포넌트로 등록합니다.
```
import uniPreviewImage from '@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image.vue'
Vue.component('uni-preview-image', uniPreviewImage)
```
로그인 후 복사

미리보기 버튼 추가
구현이 필요한 경우 이미지 미리보기 기능 페이지에서 미리보기 버튼을 추가하여 이미지의 미리보기 작업을 실행할 수 있습니다. 구체적인 코드는 다음과 같습니다.

<template>
  <view>
 <image src="/static/img1.jpg" @click="previewImage(['/static/img1.jpg'])" mode="aspectFill"></image>
 <image src="/static/img2.jpg" @click="previewImage(['/static/img1.jpg', '/static/img2.jpg'])" mode="aspectFill"></image>
 <image src="/static/img3.jpg" @click="previewImage(['/static/img1.jpg', '/static/img2.jpg', '/static/img3.jpg'])" mode="aspectFill"></image>
 <uni-preview-image :image-list="imageList" :show="showPreview"></uni-preview-image>
  </view>
</template>

<script>
export default {
  data() {
 return {
   imageList: [], // 预览图片数组
   showPreview: false, // 控制预览组件显示与隐藏
 }
  },
  methods: {
 previewImage(images) {
   this.imageList = images
   this.showPreview = true
 },
  },
}
</script>

로그인 후 복사

위 코드에서는 v-bind 명령어를 통해 미리보기할 이미지 배열을 uni-preview-image 구성요소에 전달하고, 미리보기 구성요소 표시 여부에 대한 플래그를 uni-preview-image 구성요소에 전달합니다. v-bind 명령어를 통한 show 속성. 다른 사진을 클릭하면 다른 사진을 미리 볼 수 있습니다.

이미지 미리보기
위의 코드를 통해 이미지 미리보기 기능을 구현했지만, 실제로 이미지 미리보기 기능을 구현하기에는 아직 몇 가지 핵심 코드가 누락되어 있습니다. 구체적인 코드는 다음과 같습니다.
```
<template>
  <view>
 ...
 <uni-preview-image :image-list="imageList" :show="showPreview" @change="previewChange" @close="previewClose"></uni-preview-image>
  </view>
</template>

<script>
export default {
  data() {
 return {
   ...
 }
  },
  methods: {
 ...
 previewChange(event) {
   console.log('当前预览图片索引：', event.detail.current)
 },
 previewClose() {
   this.showPreview = false
 },
  },
}
</script>
```
로그인 후 복사
위 코드에서는 각각 @change 및 @close 명령어를 통해 PreviewChange 및 PreviewClose 메서드를 바인딩했습니다. 사용자가 미리보기 이미지를 전환하면 PreviewChange 메서드가 트리거되고 event.detail.current 속성을 통해 현재 미리보기 이미지의 인덱스를 가져옵니다. 미리보기가 닫히면 PreviewClose 메소드가 트리거되고 show 속성이 false로 설정되어 미리보기 구성요소를 숨깁니다.