Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>ドキュメント</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="スタイルシート">
  <スタイル>
    *{
      マージン: 0;
      パディング: 0;
      境界線: 0;
      アウトライン: なし;
      フォントファミリ: Arial;
      リストスタイル: なし;
      -webkit-font-smoothing: アンチエイリアス;
    }
    html、本文、#app{
      高さ: 100%;
    }
    ＃アプリ{
      パディング: 20px 0;
      ボックスのサイズ: 境界線ボックス;
    }
    .ラッパー{
      ディスプレイ: フレックス;
      高さ: 100%;
      オーバーフロー: 非表示;
      最大幅: 1200px;
      マージン: 0 自動;
    }
    。メニュー{
      幅: 100ピクセル;
      高さ: 100%;
      右パディング: 20px;
    }
    。コンテンツ{
      フレックス: 1;
      高さ: 100%;
      オーバーフロー: 非表示;
      位置: 相対的;
    }
    .メニュー項目{
      下マージン: 10px;
    }
    .メニュー項目コンテンツ{
      幅: 100%;
      パディング: 7px 0;
      テキスト配置: 中央;
      境界線: 1px 実線 #ddd;
      境界線の半径: 2px;
      色: #333;
      カーソル: ポインタ;
    }
    。アクティブ{
      境界線の色: #409EFF;
      背景: #409EFF;
      色: #fff;
    }
    .コンテンツアイテム{
      下マージン: 20px;
    }
    .コンテンツ項目テキスト{
      境界線の半径: 2px;
      境界線: 1px 実線 #ddd;
    }
    .content-item-text>画像{
      幅: 100%;
      垂直位置合わせ: 中央;
    }
  </スタイル>
</head>
<本文>
    <div id="アプリ">
      <div class="wrapper">
        <div class="メニュー">
          <ul>
            <li class="menu-item" v-for="(item, index) メニュー内" :key="index" @click="handleClick(index)">
              <div class="menu-item-content" :class="{'active': getCurrentIndex() == index}" v-text="item.label"></div>
            </li>
          </ul>
        </div>
        <div class="content" ref="content">
          <ul>
            <li class="content-item" v-for="(item, index) コンテンツ内" :key="index">
              <div class="content-item-text">
                <img :src="item" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/better-scroll"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <スクリプト>
    新しいVue({
      el: '#app',
      データ： {
        コンテンツスクロール: null、
        listHeight: [], // 各サブボックスの高さを格納するために使用します currentIndex: 0,
        スクロールY: 0,
        メニュー: [
          {
            ラベル: 「写真1」
            id: 0,
          },
          {
            ラベル: 「写真2」
            id: 1,
          },
          {
            ラベル: 「写真3」
            id: 2,
          },
          {
            ラベル: 「写真4」
            id: 3,
          },
          {
            ラベル: 「写真5」
            id: 4,
          },
        ]、
        コンテンツ： [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539093143&di=d3d787658bd0b0f21d2459d90b3bd19b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1735688044%2C4235283864%26fm%3D214%26gp%3D0.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539192878&di=f46b69a4c2db2ba2f07f0fe1cc7af952&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F04%2F20121004231502_NrBQG.jpeg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539157019&di=122152eaee12d6ea019b2cec2b80e468&imgtype=0&src=http%3A%2F%2Fpic44.nipic.com%2F20140723%2F18505720_094503373000_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539175569&di=d33d35a826cc700add7b7bd53f9282c0&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140103%2F10616010_215644481373_2.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575539212191&di=ec438ea6559d06cc1a49a27b122e8edf&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg',
        ]
      },
      メソッド: {
        スクロールの初期化() {
          定数コンテンツ = this.$refs.content;
          this.contentScroll = 新しいBScroll(content, {
            click: true, // betterscroll はデフォルトでクリック イベントを防止するためです。ここで、mouseWheel: true、// マウスホイールスクロールprobeType: 3、を設定する必要があります。
            スクロールY: true、
            スクロールバー: {
              fade: true, // スクロールバーを表示するかどうか interactive: false, // 1.8.0 の新機能},
            preventDefault: false, // ブラウザがデフォルトで選択できないようにします });
          // スクロール値を取得し、それを scrollY に代入します
          this.contentScroll.on('スクロール', pos => {
            this.scrollY = Math.abs(Math.round(pos.y));
          });
        },
        getCurrentIndex() {
          (i = 0 とします; i < this.listHeight.length; i++) {
            定数高さ = this.listHeight[i];
            定数height1 = this.listHeight[i + 1];
            // 最後までスクロールしたときにコンテンツがボックスの高さに収まらない場合のメニュー表示の問題を解決します。最後までスクロールするときに最後のメニューを選択します // maxScrollY: 最大垂直スクロール位置 if (Math.abs(this.contentScroll.maxScrollY) === Math.abs(this.scrollY)) {
              this.content.length - 1 を返します。
            }
            if (!height1 || (this.scrollY < height1 && this.scrollY >= height)) {
              i を返します。
            }
          }
        },
        ハンドルクリック(インデックス) {
          定数コンテンツ = this.$refs.content;
          定数contentList = content.getElementsByClassName('content-item');
          const el = contentList[インデックス];
          // scrollToElement: ターゲット要素までスクロールします this.contentScroll.scrollToElement(el, 300);
        },
        getHeightList() {
          this.listHeight = [];
          高さを 0 にします。
          this.listHeight.push(高さ);
          定数コンテンツ = this.$refs.content;
          定数contentList = content.getElementsByClassName('content-item');
          (i = 0 とします; i < contentList.length; i++) {
            定数項目 = contentList[i];
            高さ += item.clientHeight;
            this.listHeight.push(高さ);
          }
          スクロールを初期化します。
        }
      },
      マウント() {
        this.$nextTick(関数() {
          // 画像が大きすぎて読み込みが遅いため、完全に読み込まれる前に初期化され、スクロールできなくなるため、ここでタイマー遅延が追加されます setTimeout(() => {
            this.getHeightList();
          }, 400);
        });
      },
    });
  </スクリプト>
</本文>
</html>

ブラウザの互換性により、各ブラウザのスクロールバーのスタイルは異なります。CSS スタイルを使用して変更した場合、必要な効果を実現できるのは一部のブラウザのみです。

Better-scroll はスクロールバーをシミュレートします。親コンテナーは固定の高さに設定され、overflow:hidden 属性は、子要素が親コンテナーを超えた後に非表示になるように設定されます。Better-scroll は親コンテナーに作用し、transform:translate 属性を使用して子要素を目的の位置までスクロールします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQLクエリが遅い理由

>>: 横スクロールウェブサイトデザインの概要