微信小程序--分类选择区域滚动到顶部时固定

 实现思路:根据小程序自带的组件scroll-view自带有属性bindscroll(滚动时触发)。通过这个属性获取浏览器滚动条距离顶部的位置,通过这个位置判断class类的显示就可以了

效果:

微信小程序--分类选择区域滚动到顶部时固定_第1张图片           微信小程序--分类选择区域滚动到顶部时固定_第2张图片


	
		
        <--这里写大于600,表示距离顶部600rpx时固定,可根据需要修改-->
			
				
					
						{{item}} 
						
					
				
			
		
	

 

/* 分类筛选 */
.lay .top_tab_bo{
  margin:20rpx ;
}
.lay scroll-view{
width:100%;
padding: 20rpx 0  0rpx 0;

}
.lay .topnav{
  position: fixed;
  top:0rpx;
  z-index:99;
  background: #fff;
  padding: 20rpx 0  ;
}
data:{
        // 分类列表
    lay_list: ['推荐', '彩妆护肤', '皮肤管理', '除皱瘦脸', '玻尿酸', '更多'],
    // 分类列表切换
    top: 0,
    // 分类列表样式
    tab_index: 0
  }

  // 分类切换
   lay_tab(e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      tab_index: index
    })
  },
  // 监测底部分类浮动顶部
  scrollTopFun(e) {
    let that = this;
    this.setData({
      top: e.detail.scrollTop
    })
  },

 

 

 

你可能感兴趣的:(微信小程序)