收藏
回答

如何让滚动时,页面中间的筛选栏吸顶并且下方内容在页面滚动时不超过筛选栏与之重合?

页面是这样的:

我使用position: sticky来让筛选栏在页面滚动是吸顶,但是当我继续滚动时,下方内容会溢出到筛选栏位置:

怎么做才能让筛选栏下面的contentContainer在页面滚动时不溢出到上面去呢?

页面结构:

<!--pages/mine/mine.wxml-->
<view class="mainContainer">
  <view class="titleContainer">
    title
  </view>
  <view class="bodyContainer">
    <view class="filterBarContainer">
      <view class="filterBar">筛选栏1</view>
      <view class="filterBar">筛选栏1</view>
      <view class="filterBar">筛选栏1</view>
      <view class="filterBar">筛选栏1</view>
      <view class="filterBar">筛选栏1</view>
    </view>
    <view class="contentContainer">
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
      <image src="/images/index-bg.jpg" mode="" />
    </view>
  </view>
</view>

样式:

/* app.scss */
.mainContainer {
  max-width100vw;
  max-height100vh;
  margin-bottom10vh;
  display: flex;
  flex-direction: column;
}

/* pages/mine/mine.wxss */
.titleContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top180rpx;
  font-size200rpx;
  font-weight10;
}
.mainContainer {
  background: lightcyan;
}
.bodyContainer {
  margin-bottom200rpx;
}


.filterBarContainer {
  margin-bottom20rpx;
  position: sticky;
  top0;
  left0;
  backgroundrgba($color: lightgreen, $alpha: 0.6);
  height60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding10rpx 40rpx 20rpx 40rpx;
}
.contentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height200vh;
}


回答关注问题邀请回答
收藏

2 个回答

  • 刘曦
    刘曦
    05-27
    滚动的内容‘contentContainer’设置固定高度,用‘overflow: hidden;’隐藏就好了,只在你设定的高度滑动
    
    05-27
    有用
    回复
  • 一笑皆春
    一笑皆春
    05-22

    筛选栏给个不透明的背景色就行了

    05-22
    有用
    回复 7
    • Haruhikage
      Haruhikage
      05-22
      问题是,设计是要弄成透明的。。。
      05-22
      回复
    • 徐徐徐
      徐徐徐
      05-22回复Haruhikage
      你是新手吗,你就给个设计背景一样的颜色,不透明就行啊
      05-22
      回复
    • Haruhikage
      Haruhikage
      05-22回复徐徐徐
      是新手。我知道这个方法,但是背景是一张图。所以实在没办法我就只能扣一背景图出来贴上去了
      05-22
      回复
    • 一笑皆春
      一笑皆春
      05-22回复Haruhikage
      那就根据滚动距离动态改变样式
      05-22
      回复
    • 徐徐徐
      徐徐徐
      05-22回复Haruhikage
      吸顶时给个不透明的背景
      05-22
      1
      回复
    查看更多(2)
登录 后发表内容