webapp3-goods组件

 

1. 外壳 CSS 设置

1）这一块的布局是左侧固定，右侧随屏幕宽度自适应，所以用 flex 布局。

2）左右两侧内容超过手机屏幕宽度时，并没有产生滚动，要定义视口高度，所以应该是绝对定位布局（要设置 top和 left）。并且超过视口高度的内容会被隐藏。

 

2. 左侧 menu 布局

还不确定行数使用

dispay table：不定行的垂直居中，用 table 布局最有效。

flex/*三个参数：等分，占位情况，缩放空间*/ 

flex 0 0 80px

3. 右侧食品列表布局

1）先遍历 goods，获得食品分类，再遍历分类下的详细商品。使用列表嵌套。

2）不知道有没有 food.oldPrice ，要判断一下。

3）分为左右布局，左边图片固定，右边文字内容自适应，所以又用到了flex布局

4）有 1 像素的 border，但每个列表最后一个 li 是没有这个样式的，所以要去掉这条线。在 mixin.styl 中写 border-none 的代码，只需要设置 display 为 none 即可。

 

第三方插件better-scroll

容器标签中写入 ref="menuWrapper"   和  ref="foodsWrapper"

<div class="menu-wrapper" ref="menuWrapper">

<div class="foods-wrapper" ref="foodsWrapper">

 

script标签中

import BScroll from 'better-scroll'

created () {

拿到后台数据后

this.$nextTick(() => {// vue是异步更新，必须加$nextTick,才能在nextTick里面更新，实现滚动。。

this._initScroll() })

}

methods: {
    _initScroll () {//初始化，实现滚动。
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {})//初始化，使得menu菜单栏实现滚动效果。

      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})//初始化，使得foods菜单栏实现滚动效果。
    }

 

 

实现点击左侧，滚动右侧

1.要先拿到每一个li分类--给li取一个class别名 food-list-hook

2.通过calulateHeight方法获取到li元素

_calculateheight(){

3.把所有li元素的可视高度(高度包裹title的高度)进行一个累加，放进一个数组里 ，ps：没有数组，需要在data里定义一个空数组listHeight:[]

let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")

4.定义一个height，最顶部的位置，为0

let height = 0 

5.把当前的位置高度push进刚刚定义的数组里去

this.listHeight.push(height)

6.然后需要遍历一下刚刚拿到的li元素，即：foodlist

for(let i=0;i<foodList.length; i++){}

//拿到每一个li元素

let item= foodlist[i]

7.把每一个li元素的可视高度进行一个累加 即:clientHeight

height+= item.clientHeight

把每一个li的可视高度都放进listHeight数组里

this.listHeight.push(height)            this.listHeight是所有li的可视高度

}

 

 

8.在data内定义一个初始值 scrollY：0 

9.在this.foodScroll= new BScroll(this.$refs.foodScroll,{

probeType:3 //必须指定probeType为3时，才会派发scroll事件 ,  probeType页面滚动的时候,能监听页面所在位置.

})

10.加监听事件滚动事件.

this.foodScroll.on("scroll",(pos)=>{

对得到的pos.y 进行取绝对值Math.abs和取整数Math.round,并赋与scrollY

his.scrollY = Math.abs(Math.round(pos.y))

})

11.我们既然可以拿到scrollY滚动的值，之后呢，我们就可以去通过计算属性，然后呢遍历一下我们刚刚获取到的listHeight的这个数组里面的所有的区间 ，在使用区间跟我们刚刚获取到的这个scrollY滚动的值做对比，如果当前的区间在这个里面的话，那我们就会生成一个 对应的下标，

computed:{

currentIndex是左边的下标的方法,   计算listHeight的下标值  只要他的下标值和分类列表的下标值一致的话，那个分类就有一个对应选中的样式

currentIndex(){

12,获取商品区间的范围 ps:商品区间就是相邻两个商品的之间的高度

//定义商品1,它的高度为height1

let height1 = this.listHeight[i]

//定义商品2,它的高度为height2

let height2 = this.listHeight[i+1]

判断是否在上述区间中 :用滚动的值scrollY和height1,height2做对比,如果scrollY大于等于height1并且小于height2,就说明 i 在该区间内了,然后就把i返回,即得到下标

if(!height2 || (this.scrollY >= height1&& this.scrollY<height2)){

return i;

}

}

return0; //return0 要放在for循环外,否则就会每次都会得到一个0

}

13,给左侧分类列表绑定一个class类 current    当前选中的等于index时就设置一个为current 对象

:class="{'current':currentIndex === index}" 

 

实现点击左侧,右侧实时滚动

给分类列表 绑定一个@click事件,并把index值传递过去

坑点  index  不要带$   ,使用for循环的代入index    如果是在pc端,点击会出现多个相同的index值   所以传值的时候需要引入$event

methods:{

selectMenu(index,event){

if(!event._constructed){

return

}

let foodlist = this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");

// 获取右侧index列表

let el =foodlist[index]

this.foodsScroll.scrollToElement(el,300)

},