微信小程序開發(fā)教程之視圖容器新手教程。

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標(biāo)簽上需要注意的屬性，如下

display:inline-block，這對鍵值只需要在scroll-view的子組件上設(shè)置就可以了，scroll-view上不需要設(shè)置display屬性，默認(rèn)值即可。

豎直方向滑動，如下

<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>