uniappに画像プレビュー機能を実装する方法-uni-app-php.cn

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

WBOY

リリース： 2023-07-04 10:36:06

オリジナル

8431 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

uni-gallery コンポーネントを使用します。
テンプレートタグに次のコードを追加します。
```
<uni-gallery :list="images"></uni-gallery>
```
ログイン後にコピー
注: 画像はプレビューする画像のリストで、形式は配列で、各要素には url 属性と title 属性が含まれます。

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

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

画像プレビュー機能を実装します。
次のコードを 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 属性が含まれます。

#カスタムコンポーネントを使用します。
画像プレビュー機能を使用する必要があるページの 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 サイトの他の関連記事を参照してください。