微信小程序开发教程之视图容器新手教程

微信小程序开发教程之视图容器新手教程。

scroll-view

横向滑动，如下

<code class="language-wxml hljs xml has-numbering">/*wxml*/<view>    <scroll-view class="demo-view-1" 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></code></pre><pre class="prettyprint" name="code"><code class="language-css hljs  has-numbering">/*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;}</code>

运行效果如下

scroll-view标签上需要注意的属性，如下

display:inline-block，这对键值只需要在scroll-view的子组件上设置就可以了，scroll-view上不需要设置display属性，默认值即可。

竖直方向滑动，如下

<code class="language-xml hljs  has-numbering">/*wxml*/<view>    <scroll-view class="demo-view-2" 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="&lt;/tr">              </view></scroll-view></view></code>