分享一个我前几天做的移动端标签滚动跟随的例子

随着滚动条的滚动，选项卡会对应进行切换

首先我们需要监听当前页面的滚动

挂载(){ //记录每个内容对用的数字正射影像图数组这个。arrdom=文档。getelementsbyclassname(' item-content ')；窗户。addeventlistener(' scroll '，这。handlescroll)；},销毁(){ window。removeeventlistener(' scroll '，这。handlescroll)；},我们的标签列表可以在数据里面进行自定义数组：

tabList:[{ id:1，name: '详情}，{ id:2，name: '评论}，{ id:3，name: '新闻}，{ id:4，name: '关于}，{ id:5，name: '相关' }],然后我们在数字正射影像图里面对应渲染标签列表和对应内容，内容可以直接关联到小报记者的项目中的一个字段，也可以分开写

nav :class='headerFixed '？tab固定tablist ' : ' tablist ' ' id=' tab ' div @ click=' handleSelectTab(项。id)' : class=' active==item。身份证？tab-item tab-active ' : ' tab-item ' ' v-for=' tabList ' : key=' item。id“{ item。name } }/div/nav div class=' item-content ' div 11111111/div/div class=' item-content ' div 22222/div/div class=' item-content ' div 333333/div/div class=' item-content ' div 4444/div/div class然后就是我们的射流研究…部分了

handleScroll(){ 0让滚动顶部=窗口。pageyoffset | |文档。文档元素。向上滚动| |文档。尸体。滚动顶部；这个。标题固定=向上滚动。偏移；用于(设I=0；我喜欢这个。arrDom。长度；i ) { //因为下面使用到了i 1，所以需要把最后一个分离出来判断如果(这个。ArrDom[这个。ArrDom。长度-1].offset top-滚动到top80){ if(this。我.偏移顶部滚动=80这个。arrDom[I 1].offset top-滚动到80页){这个。active=I 1 } } else { this。活动=这个。阿多姆。长度；} } },然后就成功完成了我们的效果！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。