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

<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>

<スクリプト>
'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;
  }
}
 
</スタイル>