实战篇笔记 扫码点餐小程序云开发小程序端（四）

菜单左右联动

需求：

1. 滚动右边菜品栏时，当该分类详情模块顶部接触到滚动区域的顶部，左边对应的分类栏高亮，并且显示在可视区域

2. 点击左边分类栏高亮显示，右边菜品栏滚动到该分类顶部菜品所在位置（类似于 HTML 里的锚点功能）

滚动右边菜品联动左边分类

思路

1. 使用微信小程序提供的API wx.createSelectorQuery 创建节点查询器，获取右边菜品栏每一个分类菜品的高度

2. 用一个数组变量 heightset 存储右边每一个分类菜品的高度

3. 用一个变量 trigger 记录当前左边所在类目选中的值

4. 用一个变量 tophei 记录滚动时距离顶部的高度

5. 右边菜品栏滚动时获取当前滚动的高度

   • 若该高度大于 tophei，右边菜品栏向下滚动，若该高度大于 heightset 中 trigger 对应的高度时跳转下一个分类

   • 若该高度小于 tophei，右边菜品栏向上滚动，若该高度小于 heightset 中 trigger 对应的高度时跳转上一个分类

实现

goods_height () {
    this.heightset = []
    let cate_height = 0
    const query = wx.createSelectorQuery()
    query.selectAll('.rig-height').boundingClientRect()
    query.exec((res) => {
        res[0].forEach((item) => {
            cate_height += item.height
            this.heightset.push(cate_height)
        })
    })
},
scroll (event) {
    let scrollTop = event.detail.scrollTop
    if (scrollTop >= this.tophei) {
        if (scrollTop >= this.heightset[this.trigger]) {
            this.trigger += 1
        }
    } else {
        if (scrollTop < this.heightset[this.trigger - 1]) {
            this.trigger -= 1
        }
    }
    this.tophei = scrollTop
}

点击左边分类联动右边菜品

思路

利用文档提供的 scroll-into-view实现类似于锚点的效果，用一个变量 scroll_into 记录当前视图元素 id 值（此前已设置为对应分类的 cid），点击左边分类时将该分类的 cid 赋值给 scroll_into

实现

itemIze (index, cid) {
    this.trigger = index
    this.scroll_into = cid
    setTimeout(() => {      // 防止因为已经点击过而不能二次触发
        this.scroll_into = ''
    }, 200)
}