小程序 区域、部分滚动 一

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

课程背景

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

问题分析

最下方的类别肯定会很多，这个时候如果我往下滑动，会导致 轮播跟tab区域滑动到了页面的顶部，此时就没办法进行切换了，只能重新滑动回来。这严重影响了用户体验。

实现思路

固定banner，跟tab切换区域。单纯让内容区域进行滚动。这样既能保证导航随时可见。也能保证下方内容的展示。

正文开始

1 我们先模拟最基本的页面结构

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

.con{
    text-align: center;
    
}
.ban{
    height:200rpx;
    border:1px solid green;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.tab{
    height:55rpx;
    border:1px solid red;
    display: flex;
    justify-content: center;
    margin-top: 8rpx;
    box-sizing: border-box;
}

2 通过调试面板发现，page的高度并不是100%,超过了很多。这样就导致了整个页面都可以向上滚动。我们需要的是，当前页面不滚动，就内容区域发生滚动。为了保证这样，那page高度我们需要设置成 100%

此时可以发现 body的高度正确了。但页面还是能滚动。因为最外层的con还是能滚动