uniappに画像プレビュー機能を実装する方法

uni-app で画像プレビュー機能を実装する方法

はじめに:
モバイル アプリケーション開発では、画像プレビューはよく使用される機能です。 uni-appでは、uni-uiプラグインやカスタムコンポーネントを利用して画像プレビュー機能を実装できます。この記事では、uni-appに画像プレビュー機能を実装する方法をコード例を交えて紹介します。

1. uni-ui プラグインを使用して画像プレビュー機能を実装する
uni-ui は DCloud が開発した Vue.js をベースとしたコンポーネント ライブラリで、豊富な UI コンポーネントと API を提供します。画像プレビュー コンポーネントを含むインターフェイス。
uni-ui プラグインを使用して画像プレビュー機能を実装する手順は次のとおりです。

1. uni-ui プラグインをインストールします。
   HBuilderX ツールを開き、メニュー バーで [プラグイン] -> [プラグインのインストール] を選択し、uni-ui を検索してインストールします。
2. uni-uiのご紹介です。
   画像プレビュー機能を使用する必要があるページの script タグに次のコードを追加します:

import uniGallery from '@/uni_modules/uni-ui/components/uni-gallery/uni-gallery.vue'
export default {
    components: {
        uniGallery
    }
}

3. uni-gallery コンポーネントを使用します。
   テンプレート タグに次のコードを追加します。

   <uni-gallery :list="images"></uni-gallery>

   注: 画像はプレビューする画像のリストで、形式は配列で、各要素には url 属性と title 属性が含まれます。

2. 画像プレビュー機能を実装するためのカスタム コンポーネント
uni-ui プラグインを使用したくない場合は、次の方法で画像プレビュー機能を実装することもできます。カスタムコンポーネント。カスタム コンポーネントが画像プレビュー機能を実装する手順は次のとおりです。

1. 画像プレビュー コンポーネントを作成します。
   ユニアプリ プロジェクトのコンポーネント ディレクトリにギャラリー フォルダーを作成し、そのフォルダー内に画像プレビュー コンポーネントとして gallery.vue ファイルを作成します。

2. 画像プレビュー機能を実装します。
   次のコードを gallery.vue ファイルに追加します。

   <template>
       <view>
           <image v-for="(item, index) in list" :src="item.url" :key="index" @tap="previewImage(index)"></image>
       </view>
   </template>
   
   <script>
   export default {
       props: {
           list: {
               type: Array,
               required: true
           }
       },
       methods: {
           previewImage(index) {
               uni.previewImage({
                   urls: this.list.map(item => item.url), // 图片列表
                   current: index, // 当前显示图片的索引
                   indicator: 'default' // 图片指示器样式，默认为圆点
               })
           }
       }
   }
   </script>

   注: list は、プレビューする画像の配列形式のリストで、各要素には url 属性が含まれます。

3. #カスタム コンポーネントを使用します。

   画像プレビュー機能を使用する必要があるページの script タグにギャラリー コンポーネントを導入して登録し、そのコンポーネントを template タグで使用します。
   

   <template>
       <gallery :list="images"></gallery>
   </template>
   
   <script>
   import gallery from '@/components/gallery/gallery.vue'
   export default {
       components: {
           gallery
       },
       data() {
           return {
               images: [
                   { url: 'http://example.com/image1.jpg' },
                   { url: 'http://example.com/image2.jpg' },
                   { url: 'http://example.com/image3.jpg' }
               ]
           }
       }
   }
   </script>

   注: 画像はリストです。プレビューする画像。

要約:

uni-ui プラグインを使用する場合でも、カスタム コンポーネントを使用する場合でも、uni-app に画像プレビュー機能を実装できます。プレビュー機能により、ユーザーにより良い画像閲覧体験を提供できます。この記事が画像プレビュー機能の理解と実装に役立つことを願っています。

以上がuniappに画像プレビュー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。