(2018.9.20始记) 前端排版、样式知识点

2018.9.19 哈喽名片C端商品分类页面及搜索页面

首先一个问题就是，拿到一个任务，比如我，该怎么做。凯哥的答案是：先把框架结构完成；（理由很简单，你不需要马上就死抠一些样式问题，那些可以晚点再处理，你把整个的框架做出来，后续我就可以更好地指导你，也就是我下次来看的时候你不至于还是只做了个头部，这样进度会非常慢）接下来就是可以先模拟一些静态数据，主要还是为了把框架先搭好，不要有太大的问题，期间可以注意一下“边界值”的问题，比如一行限定字数或者限宽；然后就是进行接口和数据的处理。

下面记录任务中遇到的一些小知识点：

1、商品分类category页面

最终解决方法是只用最简单的 ul li 列表，给 li 设置 display: inline-block; 宽度和 margin 设置成百分比，这样自然能自动换行，并不需要用到 flex ，在这里也避免了 flex 的一个坑：占满当前容器，也就是就算没设置 margin-top ，元素上下间距也会被撑得很开。（遇到过几次了，小程序里也是）

这里就会碰到边界值的问题，比如说每个小方块中的文字过长，就会挤出来，所以这里要用到文本溢出显示省略号的样式。https://www.cnblogs.com/mengruying/p/5565042.html

https://www.cnblogs.com/wyaocn/p/5830364.html

在数据接口处理时，主要就是涉及 v-for 和 ：key 的问题，还有就是mock数据的调用。

data () {
    return {
      items: []
    }
  },

  mounted () {
    this.getCategory()
  },

  methods: {
    // 获取商品分类
    getCategory () {
      const url = 'wpage.getCategory'

      api.mock(url).then((data) => {
        console.log('getCategory', data)
        this.items = data.list
      }).catch((err) => {
        console.log(err)
      })
    }
  }

const URL = {
  // 微页面相关
  wpage: {
    getCategory: '/productCategory/list.do' // 商品管理-获取商品分类
  }
}

2、商品列表goods-list页面

凯哥现在比较关心我拿到一个页面会如何去构造它，然后一直在引导我以更高效更易读的方式去编写页面结构。所以这个页面的话，将其分为顶部搜索部分和下方标签栏部分，标签栏部分又分为选项部分和具体内容部分。这个页面中的搜索和标签栏都可以用vant UI的东西来做，所以只需要进行简单的结构设计。（这里涉及到vant组件引用的问题）

// 引入vant中的搜索、icon、tab标签页组件
import { Search, Icon, Tab, Tabs } from 'vant'

export default {
  name: 'GoodsList',

  components: {
    [Search.name]: Search,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  }

这里用 import 引用的时候有一个问题，从 vant 里引用多个的时候，以 {} 包住，各个变量间用 ， 隔开，不能复写。

https://blog.csdn.net/qq_27552077/article/details/72902926

然后遇到了修改 UI 库中原生样式的问题，在scope的样式中，在每个需要修改的类名前添加 /deep/ ，这样可以进行修改。对于UI 库中的Search标签，还需要在标签下对其默认样式进行修改，目前我是这样做的，比如把他的默认背景颜色改成 style="background: rgb(255,255,255);"。（这里文档里有写 background 默认为#f2f2f2）

这个页面里问题最多的还是商品详情部分。首先分为 img 和两个 P 标签，第二个P标签内嵌一个 span 标签让金额字号变大，这里有一个坑，就是Chrome浏览器的字号最小只有12px，所以在设计稿中的10px并不能实现，所以后面在设置P和span 标签的行高问题时出现了不如意的问题，不过是以字体大小的调整来解决的。在这里有一个知识点，就是span 要变成block或者inline-block才可以进行行高的设置，这里需要对内联元素进行巩固。

https://www.cnblogs.com/sntetwt/p/3283198.html