v-viewer と vue を組み合わせてアルバムをプレビューする

最近、写真をアルバムごとに表示するアルバム管理システムを構築する必要があり、フロントエンドにvue、バックエンドにtp5を使って小規模なシステムを構築しました。

フロントエンドは v-viewer コンポーネントを使用します。問題が発生したのでここに記録しました。つまり、画像をプレビューするときに、画像が動的に読み込まれるため、プレビュー中に動的に更新され、デフォルトで最初の画像にジャンプします。図に示すように、解決策はプレビュー中の再更新を防ぐことです

具体的な手順は次のとおりです:

1. まず vue プロジェクトを作成しますそして、vue Scaffolding を使用してそれを作成します (理解できない場合は、ここでは説明されていませんが、公式ドキュメントを確認してください)

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>

画像は配列で渡され、各項目は画像のパス URLです。バックエンドである限りインターフェースでデータを取得し、画像のURL配列を画像に代入し、画像を一括で取得すれば問題ありません。写真が大量にある場合、通常、バックエンドはページングによって写真を取得しますが、このとき、すべての写真が読み込まれるまで待つ必要があり、プレビューが最初の写真にジャンプしません。この問題を解決するには、コンポーネントを確認する必要があります。内部的にはどのように対処すればよいでしょうか? コードを確認したところ、監視対象の画像の変更の動的更新をコメントアウトするだけでよいことがわかりました。

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

と画像がクリックされたときに update メソッドを呼び出します。次のコードを参照してください

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

概要: 特定の問題が発生した場合、特定の分析が必要となり、場合によっては問題を解決するためにソース コードの変更が必要になります; (ご質問がある場合は、ご相談ください。お申し込みの際はメモしてください。WeChat ID: 13163923579)

以上がv-viewer と vue を組み合わせてアルバムをプレビューするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。