app如何实现悬浮框滚动到那个模块定位到那。

如图:

app如何实现悬浮框滚动到那个模块定位到那。_第1张图片

使用uniapp内置方法  onPageScroll   获取到滚动了多少。

其实拿到屏幕滚动多少就很简单了,下面是思路。

tap栏切换效果代码就不贴了。直接贴如何到那个模块定位到哪,和点击定位到当前模块。


            
            
                {{item.name}}
            

            

        

onPageScroll(res) {
                let scrollTopone  = 650
                let scrollToper  = 1150
                let scrollTopthree = 1550
                let scrollTopfour  = 1750
                let scrollTopfive  = 1850
                console.log(res.scrollTop);

                 这样判断的意思是多少到多少之间,滚动到相应的位置,高亮对应tap栏。
                if (res.scrollTop >= 300 && res.scrollTop <= scrollTopone) {
                    this.tabIndex = 1
                }else if (res.scrollTop >= 650 && res.scrollTop <= scrollToper) {
                    this.tabIndex = 2
                }else if (res.scrollTop >= 1150 && res.scrollTop <= scrollTopthree) {
                    this.tabIndex = 3
                }else if (res.scrollTop >= 1550 && res.scrollTop <= scrollTopfour) {
                    this.tabIndex = 4
                }else if (res.scrollTop >= 1750 && res.scrollTop <= scrollTopfive) {
                    this.tabIndex = 5
                }else {
                    this.tabIndex = 6
                }
                if (res.scrollTop >= 300) {
                    this.show= true
                }else if (res.scrollTop < 300 ) {
                    this.show= false
                }
            },

点击那个模块定位到当前模块。

testTabClick(index) {
                if (index == 0) {
                    document.documentElement.scrollTop = 0
                }else if (index == 1) {
                    document.documentElement.scrollTop = 300
                }else if (index == 2) {
                    document.documentElement.scrollTop = 650
                }else if (index == 3) {
                    document.documentElement.scrollTop = 1150
                }else if (index == 4) {
                    document.documentElement.scrollTop = 1550
                }else if (index == 5) {
                    document.documentElement.scrollTop = 1750
                }else if (index == 6) {
                    document.documentElement.scrollTop = 2000
                }
                this.tabIndex = index
                console.log(this.tabIndex);
            },

你可能感兴趣的:(前端,javascript)