フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方法を紹介し、次のように共有します。

たとえば、このようなページでは、ヘッダー画像、下部のバー、中央のスライド可能なコンテンツ領域を配置するとします。

達成方法を簡単に紹介する

固定ヘッダーとフッター、スライド可能な中央、フレックスレイアウトを使用
1. htmlとbodyの高さを100%に設定する
2. 最も外側の div のレイアウトを柔軟なレイアウト display:flex; に設定します。
3. 最も外側のdivの主軸の方向をflex-direction: columnに設定します。主軸は垂直で、開始点は上端になります。
行 (デフォルト): 主軸は水平で、開始点は左端になります。
row-reverse: 主軸は水平で、開始点は右端にあります。
列: 主軸は垂直で、開始点は上端にあります。
column-reverse: 主軸は垂直で、開始点は下端にあります。
4. 一番外側のdivの高さを100%に設定する
5. ヘッダースタイルを通常通り記述する
6. テールスタイルを普通に書く
7. 中間のスタイルは、flex: 1; overflow: hidden または overflow: auto; -webkit-overflow-scrolling: touch です。後者は、iOS フォンでスライドするときに問題が発生します。プラグインを使用することをお勧めします。

HTML部分:

<div class="main-warp">
    <div class="header">
      <img src="imgurl" class="header-img" alt>
    </div>
    <div class="content">
      <div class="content-scroll">
        <div class="ショップボックス">
          <img src="imgurl" alt>
        </div>
        <div class="ショップボックス">
          <img src="imgurl" alt >
        </div>
        <div class="ショップボックス">
          <img src="imgurl" alt >
        </div>
        <div class="ショップボックス">
          <img src="imgurl" alt >
        </div>
      </div>
    </div>
    <div class="フッター"></div>
  </div>

js部分:

<スクリプト>
'better-scroll' から BScroll をインポートします
エクスポートデフォルト{
  データ () {
    戻る {
      
    }
  },
 
  コンポーネント:
  },
  メソッド: {
 
  },
 
  計算: {
 
  },
 
  マウントされた(){
    this.$nextTick(関数() {
      /* eslint を無効にする no-new */
      pageBottom = document.querySelector('.content') とします。
      新しいBScroll(pageBottom, { クリック: true })
    })
  },
  作成された(){
  }
}
</スクリプト>

スタイル部分:

<style lang="less" rel="stylesheet/less" type="text/less">
@r: 100;
// ヘッダーとフッターを固定し、中央部分はスライド可能で、フレックスレイアウトを使用しています // HTML、
体 {
  背景: url("//storage.jd.com/1901/04nianhuojie/02lingquanbg_02.png")
    繰り返し-y;
  背景サイズ: 100%;
  高さ: 100%;
}
.main-warp {
  最大幅: 750px;
  最小高さ: 100%;
  マージン: 0 自動;
  ディスプレイ: フレックス;
  flex-direction: 列;
  高さ: 100%;
  幅: 100%;
  ボックスのサイズ: 境界線ボックス;
  .ヘッダー{
    高さ: 500rem / @r;
    .ヘッダー画像{
      高さ: 500rem / @r;
    }
  }
  。コンテンツ {
    フレックス: 1;
    幅: 100%;
    オーバーフロー: 非表示;
    // オーバーフロー: 自動;
    // -webkit-overflow-scrolling: タッチ;
    .ショップボックス{
      マージン: 50rem / @r 0;
      画像 {
        幅: 106rem / @r;
      }
    }
  }
  .フッター{
    背景: url("//storage.jd.com/1901/04nianhuojie/fixbtnbg_02.png") 繰り返し;
    背景サイズ: 12rem / @r 11rem / @r;
    高さ: 82rem / @r;
    幅: 100%;
    下部: 0;
    色: #ffdeb8;
    フォントサイズ: 34rem / @r;
    行の高さ: 82rem / @r;
    テキスト配置: 中央;
    フォントの太さ: 太字;
    最大幅: 750px;
  }
}
 
</スタイル>

説明すると、モバイル端末で

オーバーフロー:自動;

-webkit-オーバーフロースクロール: タッチ;

iOS では、ボックスの領域を超えて指をスライドすると、再度スライドしたときに領域がスライドしない、まるで指がボックスに触れなかったかのような状態になりやすいです。そのため、ここでは BScroll プラグインを使用しており、IScroll を使用した場合も同様です。

最終的な効果は、コンテンツの直接の子要素にトランジション効果を追加することです。

このレイアウトをここに記録する

注意: このレイアウト方法は iOS 9.3 以下とは互換性がありません。iOS の下位バージョンと互換性を持たせる必要がある場合は、Flex レイアウトを慎重に使用してください。

フレックスレイアウトで上下を固定し、中央をスライドさせるレイアウトを実現する方法についての記事はこれで終わりです。上下を固定し、中央をスライドさせるフレックスレイアウトの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL の undo、redo、binlog の違いを簡単に分析します

>>:  HTML メタの使用例

推薦する

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...

JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します

この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

Vuex ステートマシンの簡単な理解とサンプルアプリケーション

目次1. 概念の素早い理解: 1. コンポーネント間でデータを共有する方法: 2. vuex とは何...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...

Nginx Httpモジュールシリーズにおけるautoindexモジュールの具体的な使用法

ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

Linux プロセス管理ツール スーパーバイザーのインストールと設定のチュートリアル

環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

1. MySQL Community Server 5.7.16をダウンロードしてインストールします...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

Mysql5.7.17 winx64.zip 解凍バージョンのインストールと設定のグラフィックチュートリアル

1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...