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

GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解

GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_02


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

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_03


先写overview的dom结构

GitHub 饿了么 跳一跳 python 饿了吗前端_饿了么seller组件_04


css

GitHub 饿了么 跳一跳 python 饿了吗前端_前端学习笔记_05


GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_06


2.公告与活动

引入split组件

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_07


seller组件都需要引入的

GitHub 饿了么 跳一跳 python 饿了吗前端_饿了么seller组件_08


GitHub 饿了么 跳一跳 python 饿了吗前端_饿了么seller组件_09


GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_10


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

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_11


GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_12


3.商家实景

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_13


GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_14


重点:一起说下滚动问题(seller组件上下滚动,页面挺长;商家实景左右滚动)引入

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_15


1).开始不滚动,尽管数据足以撑开适口,

seller异步获取数据,切换页面seller并没有变化,监测不到,不滚动

初始化一下,

GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_16


2).watch选项,可以watch到一些值的变化,用watch监测seller的变化

如果seller变化就执行这段function

在这段function中初始化scroll就可以了,把scroll抽象成_initScroll()方法

放在methods

GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_17


watch可监测到seller的信息,可以上下滚动

3).切换页面以后,dom重新渲染,生命周期重新走了一次,切换页面watch不会刷新,不会初始化,scroll也没有效果

GitHub 饿了么 跳一跳 python 饿了吗前端_学习饿了么_18


在mounted中调用_initScroll就好了,重新刷新

此时切换以后可以scroll,因为mounted的执行机制优先于watch,他看到_initScroll已经初始化了,就什么也不做。

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

4).商家实景左右滚动

在methods中

GitHub 饿了么 跳一跳 python 饿了吗前端_seller组件滚动详解_19


内层高度超过外层高度的的时候滚动

让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会被来回执行