uniapp はスクロール バーを削除します

モバイル アプリケーションの人気に伴い、uniapp は Vue.js に基づくクロスエンド アプリケーション開発フレームワークとして、複数のプラットフォームで広く使用されています。ここで説明したいのは、アプレット内の uniapp のデフォルトのスクロール バーを削除する方法です。

デフォルトでは、ミニ プログラムの Swiper や ScrollView などのコンポーネントは iOS および Android にスクロール バーを表示しますが、業界ではこれらのスクロール バーを非表示にする必要がある場合があります。では、これらのスクロール バーを削除するにはどうすればよいでしょうか?次に、具体的な解決策をご紹介します。

uniapp アプレットのスクロール バーは、デフォルトで WeChat クライアントによって提供されます。WeChat クライアントは、操作用の対応する API を公開しません。したがって、スクロール バーを削除するには、開発フレームワーク uniapp から始める必要があります。

方法 1: ページのスタイルを設定することによって

次のコードを App.vue に追加します:

<style>
  /* 去掉小程序swiper组件的滚动条 */
  .swiper-container, .swiper-wrapper, .swiper-slide {
    overflow: hidden !important;
  }
  /* 去掉小程序scroll-view组件的滚动条 */
  .scroll-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .scroll-view::-webkit-scrollbar {
    display: none !important;
  }
</style>

-scrollbar-width とscroll-view - を設定することによってms-overflow-style が none の場合は、::-webkit-scrollbar を使用してスクロール バーを非表示に設定し、スクロール バーを削除します。

ただし、この方法の欠点は、ページがより複雑になると、ページ スタイルの混乱が生じる可能性があることです。

方法 2: プラグインを使用する

uniapp プラグイン マーケットには「uni-ui」というコンポーネント ライブラリがあり、このコンポーネント ライブラリには「uni」というコンポーネントがあります。 -list" : カスタム スクロール バーをサポートし、デフォルトのスクロール バーを削除するために使用できます。

このコンポーネントを使用する手順は次のとおりです:

まず、コンポーネントに uni-list コンポーネントを導入する必要があります:

<template>
  <view>
    <uni-list :show-scrollbar="false">
      <uni-list-item>item1</uni-list-item>
      <uni-list-item>item2</uni-list-item>
      <uni-list-item>item3</uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

show-scrollbar 属性を設定することによってデフォルトのスクロールバーを非表示にするには、uni-list を false に設定します。

これまで、uniapp アプレットのデフォルトのスクロール バーを削除する 2 つの方法を紹介しました。どちらの方法でもスクロール バーを削除する効果は得られますが、WeChat クライアントの更新メカニズムにより、これらの方法は一部のバージョンでは効果的ではない場合があることに注意してください。アプリケーションでスクロール バーの問題が発生した場合、さまざまなバージョンをテストして問題を特定し、それに応じて対処する必要があります。

要約すると、uniapp アプレットのデフォルトのスクロール バーを削除するには多くの方法があり、さまざまな状況やニーズに応じて適切なソリューションを選択できます。

以上がuniapp はスクロール バーを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。