本文将带你了解微信小程序开发之开发手记《四》：视图容器，希望本文对大家学微信有所帮助。

scroll-view横向滑动，如下/*wxml*/
    <view>
    <scroll-view scroll-x="true">
        <view class="bc_green   bc_size inline"></view>
        <view class="bc_red   bc_size inline"></view>
        <view class="bc_blue   bc_size inline"></view>
        <view class="bc_pink   bc_size inline"></view>
        <view   class="bc_yellow bc_size inline"></view>
        <view class="bc_gray   bc_size inline"></view>
        <view class="bc_tan   bc_size inline"></view>
    </scroll-view>
    </view>/*wxss*/
    .demo-view-1{
        white-space: nowrap;
    height: 300rpx;
    }
   
    .bc_green{
        background-color: #00ff00;
    }
    .bc_red{
        background-color: #ff0000;
    }
    .bc_blue{
        background-color: #0000ff;
    }
    .bc_pink{
        background-color: pink;
    }
    .bc_yellow{
        background-color: yellow;
    }
    .bc_gray{
        background-color: gray;
    }
    .bc_tan{
        background-color: tan;
    }
    .inline{
        display: inline-block;
    }
    .bc_size{
        width: 300rpx;
    height: 300rpx;
    }运行效果如下 scroll-view标签上需要注意的属性，如下属性名说明位置备注scroll-x水平方向滑动时必须设置为truescroll-view标签只能在wxml中设置white-space必须设置为nowrapscroll-view标签可以在wxss中设置display必须设置为inline-blockscroll-view的子组件上可以在wxss中设置display:inline-block，这对键值只需要在scroll-view的子组件上设置就可以了，scroll-view上不需要设置display属性，默认值即可。竖直方向滑动，如下/*wxml*/
    <view>
    <scroll-view scroll-y="true">
        <view class="bc_green   bc_size"></view>
        <view class="bc_red   bc_size"></view>
        <view class="bc_blue   bc_size"></view>
        <view class="bc_pink   bc_size"></view>
        <view class=
                
                 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！