一、 布局 Flex

Flex 布局，可以簡便、完整、響應式地實現各種頁面布局，Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局。

// 指定為 Flex 布局 display: flex；

// 主要屬性
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。
  flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
  flex-shrink屬性定義項目的縮小比例，默認為1，即如果空間不足，該項目將縮小，flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小
  flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小，設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間

flex : 等分 內容縮放 展位空間；flex : 0 0 80px

二、圖標組件

子組件 iconMap

<template lang="html"> <span class="iconMap" :class="iconClassMap[iconType]"></span></template>

export default { props: { // 圖標類型 iconType: Number }, created() { // 數組類名 this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'] }}

父組件 goods

import iconMap from '../iconMap/iconMap' // 注意路徑寫法// 注冊組件 components: { iconMap }

<ul> <li v-for='(item,index) in goods' class="menu-item"> <span class="text"> // json 數據 根據 type 判斷 是否有圖標 <iconMap v-show="item.type>0" :iconType="item.type"></iconMap> {{item.name}} </span> </li></ul>

三、better-scroll 應用

類似iscroll 實現滾動效果

安裝

npm install better-scroll

引入

import BScroll from 'better-scroll'

說明

（1）原理：父容器wrapper，它具有固定的高度，當它的第一個子元素content 的高度超出了wrapper的高度，我們就可以滾動內容區了，若沒有超出則不能滾動了。

（2）better-scroll 的初始化

better-scroll 的初始化時機很重要，因為它在初始化的時候，會計算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動。因此，我們在初始化它的時候，必須確保父元素和子元素的內容已經正確渲染了。如果子元素或者父元素 DOM 結構發生改變的時候，必須重新調用 scroll.refresh() 方法重新計算來確保滾動效果的正常。所以 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機不對，或者是當 DOM 結構發送變化的時候并沒有重新計算 better-scroll。