小程序 区域、部分滚动 二

「这是我参与2022首次更文挑战的第30天，活动详情查看：2022首次更文挑战」

课程背景

• 最近各种项目忙的焦头烂额，正好掘金粑粑开始更文挑战了，抽着空也写写技术文章。
• 前段时间写微信小程序遇到一个需求
• 顶部是banner 中间是一个tab切换 下方区域要求局部滚动
• 搜了好多教程没找到方法，无奈只能自己搞
• 这里把笔记进行整理

正文继续

上一章节中我们介绍了基本结构，这里我们继续。

3 我们固定一下最外层容器

当我们把con的高度设置成 100%以后。发现页面还可以滚动。那是因为可滚动区域的大小还是超了很多。 这样导致我们的页面还是可以滚动的。

4 确定可滚动区域大小

因为page .con最中没有别的元素，所以用 100%直接可以固定住大小。但是现在我们要确定滚动区域的大小，如果用 % 我们没法确定具体的数值，那么怎么确定这个可滚动区域的大小呢？ 我采用了笨的办法。整个大小是 100% 把 100%按照比例进行区分呗。

banner设置成了15% tab设置成5% 滚动区域设置成80%

5 这样，我们禁止当前滚动区域滚动。内部再整一个容器，允许滚动。那么就实现了区域的滚动了。

<view class="con">
    <view class="ban">banner图区域</view>
    <view class="tab">tab切换区域</view>
    <view class="sc-box">
        <view class="sc-box-1">
            <view wx:for="{{100}}">
                <text>我是模拟的滚动区域的数据----{{item}}</text>
            </view>
        </view>
    </view>
</view>

.con{
    text-align: center;  
}
.ban{
    border:1px solid green;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.tab{
    border:1px solid red;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/**主要业务样式*/

page{
    height: 100%; 
}
.con{
    height:100%;
}
.sc-box{
    border:1px solid orange;
    box-sizing: border-box;
    overflow: hidden;
}
.sc-box-1{
    overflow-y: scroll;
    height:100%;
}

另一套代码

<view class="con">
  <view class="head">固定区域1</view>
  <view class="main">固定区域2</view>
  <view class="scroll">
    <view wx:for="{{100}}">
      {{item}}
    </view>
  </view>
</view>

page{
    height: 100%;
  }
  .con{
    height: 100%;
  }
  .head{
    height:200rpx;
    border:1px solid red;
    box-sizing: border-box;
  }
  .main{
    height:300rpx;
    border:1px solid green;
    box-sizing: border-box;
  }
  .scroll{
      box-sizing: border-box;
      height:calc(100% - 200rpx - 300rpx);
      overflow-y: scroll;
      border:1px solid yellow;
  }