前端学习笔记-8-14.2学习饿了么seller组件

BScroll需要注意一下。
seller组件会有滚动的几个问题：
一.当内容大于当前视口，可以滚动，小于不可以滚动。异步加载，检测不到seller时，不能滚动。
二.点击切换以后，dom重新渲染，又不能滚动了。
需要初始化，需要mounted（现在ready已被移除）

样图：

1.通过props接收传来的seller的数据

先写overview的dom结构

css


2.公告与活动
引入split组件

seller组件都需要引入的



这是5个4x的图片(同种图片，有2x，3x，4x不同尺寸的)，遍历一下。记得先拷贝进来，css中使用。


3.商家实景


重点：一起说下滚动问题（seller组件上下滚动，页面挺长；商家实景左右滚动）

引入

1).开始不滚动，尽管数据足以撑开适口，
seller异步获取数据，切换页面seller并没有变化，监测不到，不滚动
初始化一下，

2).watch选项，可以watch到一些值的变化，用watch监测seller的变化
如果seller变化就执行这段function
在这段function中初始化scroll就可以了，把scroll抽象成_initScroll()方法
放在methods

watch可监测到seller的信息，可以上下滚动
3).切换页面以后，dom重新渲染，生命周期重新走了一次，切换页面watch不会刷新，不会初始化，scroll也没有效果

在mounted中调用_initScroll就好了，重新刷新
此时切换以后可以scroll，因为mounted的执行机制优先于watch，他看到_initScroll已经初始化了，就什么也不做。

我们要给_initScrol加个逻辑this.scroll.refresh();
这样的话，我们在开始的时候先执行mounted，初始化scroll，不会滚动，
接着seller回调函数会执行，这是他有走到else分支，重新计算scroll，然后refresh方法。这时元素的高不被撑开了，所以被正确的执行
上下滚动完成。

4).商家实景左右滚动
在methods中

内层高度超过外层高度的的时候滚动
让ul的宽度超过外层wrapper的宽度才可以
但是这里ul的宽度和wrapper的宽度是一样的，无效果
所以要手动设置ul的效果
首先计算ul的宽度（每个li的宽度是知道的）
先定义每个图片的宽度120，margin：16，计算ul宽度
（图片的宽度+margin）*this.seller.pics.length
这样就计算了一个宽度，最后减去margin，最后一图片是没有margin的
这样就计算了ul的宽，

pics一样的，开始是没有的，一样的方法和_initScroll()
放进methods，
在watch的seller中：this._initPics();

因为一开始seller是一个空的object，所以开始pics是没有的
所以这个逻辑不会被执行
那我们如果在watch的seller变化的时候执行_initPics()。
在mounted中写上this._initPics(),
同样判断pics是否有了，如果new了，就没必要再new了
如果已经被new了，就走else逻辑

注意：
better-scroll的初始化一定要保证dom已经被渲染了，
在使用props传来的值时，一开始要用到seller，因为它是异步更新的，
要用watch去观测他的更新，然后是更新后的操作
同时要考虑到切换
可能有些属性不会再变化了
mounted会被来回执行