uniappでページの左右スクロールを実装する方法

モバイル インターネット テクノロジの継続的な発展に伴い、最新のフロントエンド テクノロジはますます多彩になり、UI/UX デザイナーもページ効果のプレゼンテーションに対してより高い要件を提示し始めています。中でも左右スクロール効果は様々なシーンで広く使われています。この記事では、uniapp を使用してページの左右のスクロール効果を実現する方法を紹介します。

1. uniapp の概要

Uniapp は、vue.js フレームワークを開発センターにカプセル化し、WeChat アプレット、アプリ、 H5など。他のマルチプラットフォーム フレームワークと比較して、uniapp は軽量で使いやすく、プラグインをサポートしています。

2. 実装のアイデア

uniapp でページの左右のスクロール効果を実現する一般的な方法は、better-scroll プラグインを導入することです。 better-scroll は強力かつ柔軟な isscroll コンポーネントであり、開発者がモバイル側でさまざまなスクロール効果を実現するのに役立ちます。ここでは、better-scroll プラグインを使用して、uniapp の左右のスクロール効果を実現します。これは次の手順に分かれています。

1. better-scroll プラグインをダウンロードして導入します。 uniapp プロジェクト

better-scroll プラグインをプロジェクトのルート ディレクトリにインストールします:

npm install better-scroll --save

使用する必要があるページに導入してインスタンス化します:

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}

this.$refs.wrapper は、スクロール領域が DOM 要素である場所です。

2. 左右のスクロール領域を実現します

ページ内の左右のスクロール領域の HTML 構造を実現します。例:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </div>
</template>

ラッパーはより優れたスクロール プラグインです。必要なスクロール領域コンテナー、コンテンツはスクロール領域内のコンテンツです。 item はスクロール可能な各子項目です。

3. 左右のスクロール効果を実現します

スタイルで左右のスクロール効果を実現します。例:

<style>
  .wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .content {
    width: 100%;
    height: 200px;
    display: flex;
  }

  .item {
    flex: 0 0 120px;
    height: 200px;
    margin-right: 10px;
    background-color: #eee;
  }
</style>

その中で、ラッパーは幅と高さを設定し、領域外のコンテンツを非表示にするにはオーバーフローを非表示に設定する必要があります。コンテンツは幅と高さを設定する必要があり、子項目には特定の幅と高さが必要です。項目はそれぞれスクロール可能なサブ項目であり、等間隔と等幅を実現するには flex 属性を設定する必要があります。

4. スクロール イベント モニタリングを追加

mounted() 関数にスクロール イベント モニタリングを追加します:

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper)

  this.scroll.on('scroll', (pos) => {
    console.log(pos.x, pos.y)
  })
}

ここで、pos.x と pos.y は次のとおりです。スクロール領域のオフセットこれら 2 つの値を監視することで、さまざまな動的効果を実現できます。

3. 概要

上記の 4 つの手順により、uniapp でページの左右のスクロール効果を実現でき、製品の表示などのさまざまなシナリオに適用できます。 、絵の展示、カードレイアウトなど。ただし、最高の効果を得るには、スクロール領域とサブ項目のサイズの調整、およびスクロール改善プラグインのパラメーター設定に注意を払う必要があります。

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