この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方法を紹介し、次のように共有します。 たとえば、このようなページでは、ヘッダー画像、下部のバー、中央のスライド可能なコンテンツ領域を配置するとします。 達成方法を簡単に紹介する 固定ヘッダーとフッター、スライド可能な中央、フレックスレイアウトを使用 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 の違いを簡単に分析します
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...
この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...
序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...
目次1. 概念の素早い理解: 1. コンポーネント間でデータを共有する方法: 2. vuex とは何...
思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
環境: CentOS 7公式ドキュメント: http://supervisord.org/インストー...
展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....
目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...
1. MySQL Community Server 5.7.16をダウンロードしてインストールします...
現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...
多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...
1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...