vue2.0 实现锚点定位 （以外卖APP为例）

你可以去这里找到完整的源码和更多的内容: https://github.com/Tiramisu1/vueElem

效果图如下， emmm.....还不知道怎么上传动图，就将就着看吧，相信你能想象的出来的。

1、左侧菜单栏和右侧的食品栏都是使用的 better-scroll 组件，怎么使用，请看下面的代码。

// 这里是左侧菜单

    //请记住这个ref
            

                

                    
                        {{item.name}}
                    
                
            
        

// 这里是右侧食品

  //请记住这个ref
            

                

                    
{{item.name}}
                    

                        
                        

                            

                                
                            
                            

                                
{{food.name}}
                                
{{food.description}}
                                

                                    {{'月售'+food.sellCount+'份'}}
                                    {{'好评率'+food.rating+'%'}}
                                
                                

                                    ￥{{food.price}}
                                    ￥{{food.oldPrice}}
                                
                                

                                      //我是一个自定义组件请不要在意
                                
                            
                        
                    
                
            
        

2、使用 better-scroll，肯定是先要引用的。

// script

import BScroll from "better-scroll";

  created() {
          this.initScroll();
    },

    methods: {
        //设置右侧内容滚动
        initScroll() {
            this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                click: true //可以点击
            });
            this.foodScroll = new BScroll(this.$refs.foodsWrapper, {
                probeType: 3, //检测滚动的位置
                click: true
            })
}

3、先来实现左侧点击，右侧滚动的效果，在左侧菜单添加一个click事件。关于 scrollToElement 以及better-scroll 组件，你可以看看这个。要解释就太多了，我懒。

//html
请参考第一部分的HTML代码........相信你能看懂的


// Methods

selectMenu(index, event) {
            if (!event._constructed) {
                //避免点击事件发生两次
                return;
            }
            let foodList = this.$refs.foodsWrapper.getElementsByClassName(
                "food-list-hook"
            );
            let el = foodList[index];
            this.foodScroll.scrollToElement(el, 300);
}

4、接下来右侧内容滚动控制左侧菜单，首先获取右侧内容的高度并放置在一个数组里。

// methods

//获取右侧内容高度
        calculateHeight() {
            let foodList = this.$refs.foodsWrapper.getElementsByClassName(
                "food-list-hook"
            );
            let height = 0;
            this.listHeight.push(height);
            for (var i = 0; i < foodList.length; i++) {
                let item = foodList[i];
                height += item.clientHeight; //元素内容及其边框所占据的空间大小
                this.listHeight.push(height);
            }
        }
 

当然你需要把这个方法放进 created 里面，就像之前的 initScroll 方法一样。

5、同时我们需要获取到右侧内容滚动的高度，为了后面判断做对比。

// methods

   // 获取滚动的Y轴
            this.foodScroll.on("scroll", pos => {
                this.scrollY = Math.abs(Math.round(pos.y));
            });



emmmm..... 你可以把它放在 initScroll 方法里面， 就像这样



//设置右侧内容滚动
        initScroll() {
            this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                click: true //可以点击
            });
            this.foodScroll = new BScroll(this.$refs.foodsWrapper, {
                probeType: 3, //检测滚动的位置
                click: true
            });
            // 获取滚动的Y轴
            this.foodScroll.on("scroll", pos => {
                this.scrollY = Math.abs(Math.round(pos.y));
            });
        }

6、最后，高度有了，Y轴有了，来对决吧，还记得左侧菜单的高亮么？

// html

 
  // 请记住这个 currentIndex 

​
// js

 computed: {
        currentIndex() {
            for (var i = 0; i < this.listHeight.length; i++) {
                let height1 = this.listHeight[i];
                let height2 = this.listHeight[i + 1];
                if ( !height2 ||(this.scrollY >= height1 && this.scrollY < height2)) {
                    return i;
                }
            }
            return 0;
        }
    }

​

至于css 相信你可以的！

如果你不是很懂， 建议你去看看这篇文章 https://www.imooc.com/article/18232