标签：605 index vue 选项卡 左边 num right 竖直 滑动

查了诸如vant，mint组件上并没有找到期望的这种效果(cube组件上有，但项目中实在不想再引入一个第三方的组件库了)，但实际上在移动端app开发中很常见的一个效果。于是按照自己的思路将这个效果做了出来，

效果是：

1.左右两栏可以分别独立滑动，

2.点击左边选项卡，右边内容滑动到相应内容，

3.而且滑动右边内容时，左边的选项卡也跟着聚焦到对应位置

页面：

 代码：

export default{ 　　 name: "",     components:{         // Tabbar2     },     data(){       return{           list:['热门','中超','英超','西甲','意甲','国家队','中甲','南斯拉夫','荷甲','葡甲','法甲','苏超','俄超','土超','美职联','日至赛','K联赛'],           curLeft:0       }，       methods：{ 　　         leftSelect(index){                                                            //左边点击控制右边(给左边循环出来的按钮绑定点击事件)             this.curLeft = index             let num                                                                      //设置scroll的位置             let right = document.getElementById('right')             if(index==0) num = 605*index-60                             // 605是右边每一部分的高度，60是将整个屏幕高度遮起来header的高度，这一部分当然不计入滑动的距离啦，             else num = 605*index             $("#right").animate({ scrollTop: num }, 400);              }     },    mounted:function(){                                                             //右边滑动控制左边         var right = document.getElementById("right")               //给滑动的部分添加监听事件         right.addEventListener('scroll', () => {                                      let hopeIndex = Math.ceil((right.scrollTop-60)/605)             this.curLeft = hopeIndex                                            将监听得到的数值计算出来当前屏幕窗口的内容应该属于哪个index，并赋值给左边的index         }, true);      }     }, }

标签：605,index,vue,选项卡,左边,num,right,竖直,滑动
来源： https://www.cnblogs.com/wd163/p/12510704.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。