vue2.0 实现锚点定位 (以外卖APP为例)

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

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

vue2.0 实现锚点定位 (以外卖APP为例)_第1张图片

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

// 这里是左侧菜单



// 这里是右侧食品

//请记住这个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

 
​
// 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

你可能感兴趣的:(vue2.0 实现锚点定位 (以外卖APP为例))