码迷,mamicode.com
首页 > 其他好文 > 详细

vue实现左右两列竖直分别滑动,且双向关联的选项卡(二)

时间:2020-04-22 13:19:10      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:关联   组件   lis   数值   完成   左右   scrollto   exp   event   

查了诸如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);
     }
    },
}

vue实现左右两列竖直分别滑动,且双向关联的选项卡(二)

标签:关联   组件   lis   数值   完成   左右   scrollto   exp   event   

原文地址:https://www.cnblogs.com/wd163/p/12510704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!