uniapp Webviewポップアップウィンドウの作り方-uni-app-php.cn

uniapp Webviewポップアップウィンドウの作り方

PHPz

リリース： 2023-04-23 09:42:57

オリジナル

1529 人が閲覧しました

モバイル Web アプリケーションの人気に伴い、Webview ポップアップウィンドウはモバイル Web アプリケーション開発における一般的な要件の 1 つになりました。優れたクロスプラットフォーム開発フレームワークとして、Uniapp は Webview 関連のコンポーネントと API も提供しており、開発者は Webview ポップアップウィンドウの機能を簡単に実装できます。

この記事では、Webview を使用して Uniapp にポップアップウィンドウを実装する方法と具体的な手順に焦点を当てます。

Webview コンポーネントの作成

まず、Uniapp で Webview コンポーネントを作成します。 Uniapp では、webview コンポーネントを使用して Web ページを表示できます。

コード例:

<template>
  <view class="container">
    <web-view :src="url" :style="webViewStyle" @message="onMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewStyle: {
        height: `${uni.upx2px(500)}px`
      },
      url: 'https://www.example.com'
    }
  },
  methods: {
    onMessage(e) {
      //  接收来自webview组件发来的数据
      console.log(e.detail.data)
    }
  }
}
</script>

ログイン後にコピー

Webview コンポーネントをポップアップウィンドウコンポーネントに導入する

次に、Webview コンポーネントをポップアップウィンドウコンポーネントに導入する必要があります。ポップアップウィンドウコンポーネント。この場合、ユーザーが他のコンポーネントをクリックしたときに表示される下部のポップアップコンポーネントを作成します。

コード例:

<template>
  <view>
    <!-- 遮罩 -->
    <view class="mask" v-show="visible" @click="onClose"></view>

    <!-- 底部弹窗 -->
    <view class="popup" :class="{ show: visible }">
      <webview :src="url" :style="webViewStyle"></webview>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false, // 是否展示底部弹窗
      webViewStyle: {
        height: `${uni.upx2px(500)}px`
      },
      url: 'https://www.example.com'
    }
  },
  methods: {
    // 打开底部弹窗
    open() {
      this.visible = true;
    },
    // 关闭底部弹窗
    onClose() {
      this.visible = false;
    }
  }
}
</script>

<style>
.popup {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: #fff;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform .3s;
}

.popup.show {
  transform: translateY(0);
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  background-color: #000;
  z-index: 999;
  transition: opacity .3s;
}

.mask.show {
  opacity: 1;
}
</style>

ログイン後にコピー

ポップアップウィンドウをトリガーする

最後に、他のコンポーネントのクリックイベントをリッスンする必要があります。クリック、ポップアップウィンドウの呼び出しポップアップウィンドウの表示には、ウィンドウコンポーネントの open メソッドが使用されます。

コード例:

<template>
  <view>
    <view class="button" @click="showPopup">显示弹窗</view>
    <popup ref="popup"></popup>
  </view>
</template>

<script>
    import Popup from './components/popup'

    export default {
        components: {
            Popup
        },
        methods: {
            // 显示弹窗
            showPopup() {
                this.$refs.popup.open()
            }
        }
    }
</script>

ログイン後にコピー

さて、Uniapp を使用して Webview ポップアップウィンドウを実装する方法と具体的な手順がわかりました。誰もが自分のプロジェクトのニーズや好みに応じて自由に変更および拡張して、より豊富な機能を実現できると思います。この記事が皆さんのお役に立てれば幸いです、読んでいただきありがとうございます!

以上がuniapp Webviewポップアップウィンドウの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。