better-scroll切换栏吸顶效果

￡神魔★判官ぃ 2021-07-25 02:24 603阅读 0赞

图片加载完成后,通过ref来获取组件距离父元素顶部的高度,通过监听滚动事件,把滚动y坐标和组件距离父元素顶部的距离比较,找到吸顶的临界值
    	
    	暴露了问题:
    	(1)在better-scroll里使用position:sticky会无效,使用position:fixed定位会被better-scroll自身实现过程的tanslate给位移出去
    	(2)改变切换栏内容,当组件创建时会重新挂载,使得吸顶前后内容不一致
    	(3)当使用v-if来显示隐藏时,无法获取ref
    	
    	解决方案:
    	(1)做两个切换栏,一个在better-scroll外,一个在内,当达到临界值时,通过v-if指令,让内部隐藏,外部显示,外部可以使用postion:fixed达到吸顶的效果
    	(2)通过两个ref(相同的ref后者会覆盖前者),操作组件内的当前索引属性,使得吸顶前后切换栏内容一致
    	(3)v-show

代码示例:

<template>
       <div class='home'>
         <NavBar title='购物街'/>
         
        <TabControl :title="['流行','新款','精选']" @currentIndex='_currentIndex' ref='tabControl' :class='{fixed:tabFixed}' v-show='tabFixed'/>
         
         <Scroll @loadMore='_loadMore' @loadRefresh='_loadRefresh' :tabOffsetTop='tabOffsetTop' @sticky='_sticky'>
    		//监听轮播图的图标加载完成后调用@load='_onLoad'
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for='(item,index) in banners' :key='index'><img :src="item" alt=""  @load='_onLoad'></van-swipe-item>
          </van-swipe>
          
          <TabControl v-show='!tabFixed' :title="['流行','新款','精选']" @currentIndex='_currentIndex' ref='tabControl2' />
    
          
        </Scroll>
       </div>
        
    </template>
        //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)
          }
      })

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d7171113a93a4cdf9075dba62e5d24f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/b8fa682448d246d99be44c5a16fe3231.png