앨범을 미리 보려면 vue와 결합된 v-viewer를 사용하세요.

최근에는 앨범별로 사진을 표시해야 하는 사진 앨범 관리 시스템 구축이 필요해서 프런트엔드에 vue, 백엔드에 tp5를 사용해 소규모 시스템을 구축했습니다.

프런트엔드에서 문제가 발생하여 여기에 기록했습니다. 이미지를 미리 볼 때 이미지가 동적으로 로드되므로 기본적으로 첫 번째 이미지로 이동합니다. 유일한 방법은 미리보기 중에 재업데이트를 방지하는 것입니다.

1. 먼저 vue 프로젝트를 만들고 vue 스캐폴딩을 사용하세요. (이해가 안 되는 경우 공식 문서를 확인하세요.

2. 페이지에서 v-viewer 컴포넌트

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer/src/component.vue'

3를 소개합니다. 호출 메소드에서 템플릿 파일

    <viewer :images="images" class="images clearfix" @inited="handleInited">
        <template slot-scope="scope">
            <img v-for="(src,i) in scope.images"
                :src="src" :key="src" :class="&#39;image &#39; + newClass[i] " @click="handleShow(i)">
        </template>
    </viewer>

images에 다음 코드를 작성하고 각 항목이 경로에 전달됩니다. 이미지의 URL

4. 백엔드 인터페이스가 데이터를 가져오는 한, 이미지 URL 배열을 이미지에 할당하기만 하면 이미지를 한꺼번에 가져오면 문제가 없습니다. 사진 수가 많은 경우 일반적으로 백엔드는 페이징을 통해 사진을 가져옵니다. 이때 이 문제를 해결하려면 모든 사진이 로드될 때까지 기다려야 하며 미리보기가 첫 번째 사진으로 이동하지 않습니다. , 구성 요소를 살펴봐야 합니다. 내부적으로 어떻게 처리해야 할까요? 코드를 살펴본 후 모니터링되는 이미지의 변경 사항에 대한 동적 업데이트만 주석 처리하면 된다는 것을 알았습니다.

  watch: {
    images () {
      // this.$nextTick(() => {
      //   this.onChange()
      // })
    },

그런 다음 업데이트를 호출하세요. 이미지를 클릭했을 때의 메서드입니다. 다음 코드를 참조하세요

 handleShow(index) {
    this.$viewer.update()
    this.$viewer.view(index) // 预览当前图片
}

요약: 특정 문제가 발생하면 특정 분석이 필요하며 때로는 문제를 해결하기 위해 소스 코드를 변경해야 합니다. (질문이 있는 경우 상담하고 토론하세요. 메모해 주세요. 신청 시 위챗 ID: 13163923579)

위 내용은 앨범을 미리 보려면 vue와 결합된 v-viewer를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!