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

梦里梦外; 2021-07-25 00:32 735阅读 0赞

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]           ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

<scroll-view style="width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">
    	<view class="top_tab_bo">
    		<scroll-view scroll-x="true" class="{
       {top>600 ? 'topnav' : ''}}">
            <--这里写大于600，表示距离顶部600rpx时固定，可根据需要修改-->
    			<view class="flexRow tab_bo">
    				<block wx:for="{
       {lay_list}}">
    					<view class="tab" bindtap="lay_tab" data-index="{
       {index}}">
    						<view class="tetx {
       {index==tab_index?'tetx_':''}}">{
       {item}} </view>
    						<view class="{
       {index==tab_index?'_':''}}"></view>
    					</view>
    				</block>
    			</view>
    		</scroll-view>
    	</view>
    </scroll-view>

/* 分类筛选 */
    .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
        })
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617103021436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/453935b15809453f82e69aae1c4c3ecb.png