基本布局与视图容器

视图容器

视图容器 / view (qq.com)

滚动容器

scroll-view

视图容器 / scroll-view (qq.com)

swiper

视图容器 / swiper (qq.com)

scroll-view与view区别

view也可以通过overflow:auto实现滚动容器，那么两者区别是什么?

scroll-view有滚动优化选项, 能监听滚动事件等等。

view更适合配合css完成布局

布局

上下布局

方式一

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <view class="flex-1 h-0 overflow-hidden bg-orange">
        <scroll-view scroll-y class="h-full">
            <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
        </scroll-view>
    </view>
</view>

方式二

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <!-- overflow-auto,scroll-y都是必须的
        有overflow-auto, 没有scroll-y 无法滚动
        有scroll-y, 没有overflow-auto 是整页滚动
        有scroll-y, 有overflow-auto, 才是预期的仅scroll-view滚动 -->
    <scroll-view scroll-y class="flex-1 bg-orange h-0 overflow-auto">
        <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
    </scroll-view>
</view>

橙色部分是滚动容器，绿色部分为定高容器

上中下布局

方式一

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <!-- 这里最外层的view是必须的 -->
    <view class="flex-1 h-0 overflow-hidden bg-orange">
        <scroll-view scroll-y class="h-full">
            <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
        </scroll-view>
    </view>
    <view class="flex-shrink-0 bg-red h-50">底部</view>
</view>

方式二

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <!-- overflow-auto,scroll-y都是必须的
        有overflow-auto, 没有scroll-y 无法滚动
        有scroll-y, 没有overflow-auto 是整页滚动
        有scroll-y, 有overflow-auto, 才是预期的仅scroll-view滚动 -->
    <scroll-view scroll-y class="flex-1 bg-orange h-0 overflow-auto">
        <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
    </scroll-view>
    <view class="flex-shrink-0 bg-red h-50">底部</view>
</view>

橙色部分是滚动容器，绿色,红色部分为定高容器

上左右布局

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <!-- overflow-hidden是必须的否则,会导致整页滚动 -->
    <view class="flex-1 h-0 flex flex-row overflow-hidden">
        <!-- 第一个外部的view是必须的,否则无法实现两列布局 -->
        <view class="flex-shrink-0 bg-red">
            <!-- h-full必须,否则无滚动条 -->
            <scroll-view scroll-y class="h-full">
                <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
            </scroll-view>
        </view>
        <scroll-view scroll-y class="flex-1 h-0 bg-orange">
            <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
        </scroll-view>
    </view>
</view>

绿色定高，红/橙滚动容器

上左右下布局

<!-- index.wxml -->
<view class="flex flex-col h-full">
    <view class="flex-shrink-0 bg-green h-50">第一行</view>
    <!-- overflow-hidden是必须的否则,会导致整页滚动 -->
    <view class="flex-1 h-0 flex flex-row overflow-hidden">
        <!-- 第一个外部的view是必须的,否则无法实现两列布局 -->
        <view class="flex-shrink-0 bg-red">
            <!-- h-full必须,否则无滚动条 -->
            <scroll-view scroll-y class="h-full">
                <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
            </scroll-view>
        </view>
        <scroll-view scroll-y class="flex-1 h-0 bg-orange">
            <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
        </scroll-view>
    </view>
    <view class="flex-shrink-0 bg-pink h-50">底部</view>
</view>

绿/粉色定高，红/橙滚动容器

左右布局

<!-- index.wxml -->
<view class="flex flex-row h-full overflow-hidden">
    <!-- 第一个外部的view是必须的,否则无法实现两列布局 -->
    <view class="flex-shrink-0 bg-red">
        <!-- h-full必须,否则无滚动条 -->
        <scroll-view scroll-y class="h-full">
            <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
        </scroll-view>
    </view>
    <scroll-view scroll-y class="flex-1 h-0 bg-orange">
        <view wx:for="{{list}}" wx:key="index" class="h-50">{{item}}</view>
    </scroll-view>
</view>

红/橙色滚动容器

扩展: 通过js和css计算剩余空间高度

上面的自适应高度都是通过纯css实现的，其实通过js+css也能实现, 只是麻烦了一点

scroll-view如何自适应页面剩余高度_scrollview高度自适应-CSDN博客

一招搞定微信小程序ScrollView等组件高度自适应_怎么让scroll-view不撑开父元素高度-CSDN博客