短视频商城源码，better-scroll切换栏吸顶效果

短视频商城源码，关于切换栏吸顶效果的代码
代码示例:

    //tab切换
    _currentIndex(index)
    {
     
      switch(index)
      {
     
        case 0:
          this.currentType='pop';
          break;
        case 1:
          this.currentType='new';
          break;
        default:
          this.currentType='sell';
          break;
      }
      //通过ref改变组件内部的属性,使得两个切换栏的状态一致
      this.$refs.tabControl.currentIndex=index
      this.$refs.tabControl2.currentIndex=index

    },
    //当轮播图加载完成后,获取tabs距离顶部的高度,来做吸顶效果
    _onLoad()
    {
     
       this.tabOffsetTop=this.$refs.tabControl.$el.offsetTop;
      
    },
    //吸顶实现
    _sticky(tabFixed)
    {
     
      this.tabFixed=tabFixed;
    
    }

组件向外传递数据

  //监听滚动事件
  this.scroll.on('scroll',(e)=>{
     
      //回到顶部按钮出现临界值
      this.show=-e.y>400?true:false

      //tabs的吸顶判断

      if(-e.y>=(this.tabOffsetTop-50))
      {
     
        this.$emit('sticky',true)
      }else{
     
        this.$emit('sticky',false)
      }
  })

以上就是关于短视频商城源码，切换栏吸顶效果的全部代码，更多关于短视频的信息，欢迎关注之后的文章
本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理