一、 布局 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。