uniappでスクロールせずに頭を固定する方法

モバイル インターネットの普及に伴い、モバイル アプリケーションの需要が増加しており、モバイル アプリケーション開発のコストと敷居も低下しています。中でもuniappはクロスプラットフォームのアプリケーションフレームワークとして人気があり、小規模プログラム、H5、Android、iosプラットフォームの開発を統合し、開発者がより効率的にモバイルアプリケーションを開発できるのが特徴です。

uniapp アプリケーションの開発プロセスでは、スクロールせずにヘッドを固定することが非常に一般的な要件です。たとえば、リスト ページでユーザーがスライドするとき、ヘッドのタイトル バーも一緒にスライドするのではなく、固定されたままにしておきたいと考えます。これを実現する方法も非常に簡単なので、以下に2つの方法を紹介します。

方法 1: uni-app コンポーネントを使用する

uni-app は非常に使いやすいコンポーネント vue-sticky を提供します。このコンポーネントを使用すると、修正の効果を簡単に実現できます。スクロールせずに先頭に進みます。

まず、ヘッダーを修正する必要があるページに vue-sticky コンポーネントを導入します:

<template>
  <div>
    <vue-sticky>
      <your header content>
      // 此处是头部内容
    </vue-sticky>
    <your page content>
    // 此处是页面内容
  </div>
</template>

<script>
  import VueSticky from "@/components/vue-sticky/vue-sticky";
  export default {
    components: { VueSticky },
    data() {}
  };
</script>

次に、vue-sticky コンポーネントで次の属性を定義する必要があります:

• offset-top: 固定する必要がある距離、つまり、ヘッドの固定を開始するためにスライドする場所を示します。デフォルトは 0 です。
• offset-bottom: スクロール バーを表示する必要がある距離を示します。つまり、ページが一番下までスクロールした後、まだ距離が遠い場合、このイベントがトリガーされます。デフォルトは 0 です。
• scroll-target: 固定ヘッドを必要とするスクロール コンテナを表し、実際には better-scroll を使用して実装されます。このプロパティが渡されない場合、デフォルトでウィンドウ オブジェクトにバインドされます。

次に、スクロールせずに固定ヘッドを実現できます。

方法 2: CSS プロパティを使用する

スクロールせずに頭を固定する効果を実現するために vue-sticky コンポーネントを使用したくない場合は、CSS プロパティの使用を選択することもできます。この要件を達成するために。

まず、ヘッダーを修正する必要があるページ上で .fixed-nav:

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

などのクラスを定義します。次に、リスト ページのスクロール イベントをリッスンするメソッドをバインドします。

<template>
  <div ref="scrollBox" @scroll="handleScroll">
    <div class="nav fixed-nav">
      // 头部内容
    </div>
    <ul>
      // 列表内容
    </ul>
  </div>
</template>

<script>
  export default {
    data() {},
    methods: {
      handleScroll() {
        const scrollTop = this.$refs.scrollBox.scrollTop;
        if (scrollTop > 100) {
          this.$refs.nav.classList.add("fixed-nav");
        } else {
          this.$refs.nav.classList.remove("fixed-nav");
        }
      }
    }
  };
</script>

このうち、this.$refs.scrollBox はスクロール イベントにバインドされたコンテナを表し、this.$refs.nav は必要なヘッダー コンテンツを表します。修正されること。

上記はスクロールなしの固定ヘッドを実現する 2 つの方法であり、開発者は自分のニーズに応じて最適な方法を選択できます。一般に、uniapp フレームワークの開発は非常に便利で迅速であり、公式が豊富なコンポーネントとインターフェイスを提供しているため、誰もが創造性を最大限に発揮して、より良いモバイル アプリケーションを開発できます。

以上がuniappでスクロールせずに頭を固定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。