<code id="uhtof"><ol id="uhtof"></ol></code>
  • <code id="uhtof"></code>
  • <track id="uhtof"></track><object id="uhtof"></object>

    1. <td id="uhtof"><ruby id="uhtof"></ruby></td>
      <p id="uhtof"><strong id="uhtof"><small id="uhtof"></small></strong></p>
        <acronym id="uhtof"></acronym>
      1. 龍巖易富通網絡科技有限公司

        龍巖小程序開發,龍巖分銷系統

        小程序之scroll-view組件

        2023.08.05 | 354閱讀 | 0條評論 | 小程序

        scroll-view 可滾動視圖區域。有時候我們的一些視圖在手機指定的寬度和高度不夠存放,那么可以放在 scroll-view 中,以滾動的形式顯示被隱藏的內容。

        滾動視圖分為橫向滾動和縱向滾動兩種方式,下面我們對視圖的滾動進行一一說明。

        橫向滾動

        設置橫向滾動(必須滿足以下三點):

        1.給scroll-view添加scroll-x="{{true}}"屬性(設置為允許橫向滾動)

        2.給scroll-view添加white-space:nowrap;屬性(設置為不換行)

        3.給scroll-view中的子元素設置為display:inline-block;(設置為子組件顯示在一行)

        示例代碼如下:

        .wxml文件代碼

        <scroll-view class="scroll-view" scroll-x="{{true}}">

          <view class="scroll-item bg_red"></view>

          <view class="scroll-item bg_yellow"></view>

          <view class="scroll-item bg_blue"></view>

          <view class="scroll-item bg_pink"></view>

          <view class="scroll-item bg_gray"></view>

        </scroll-view>

        .wxss文件代碼

        .scroll-view{

          width: 100%;

          height: 200px;

          white-space: nowrap;

          background: #43234f;

        }

        .scroll-view .scroll-item{

          display: inline-block;

          width: 100px;

          height: 100px;

        }


        贊 (

        發表評論

        888米奇影院,91精品国产自产在线观看永久∴,久久最新网址,91国内揄拍国内精品情侣对白
        <code id="uhtof"><ol id="uhtof"></ol></code>
      2. <code id="uhtof"></code>
      3. <track id="uhtof"></track><object id="uhtof"></object>

        1. <td id="uhtof"><ruby id="uhtof"></ruby></td>
          <p id="uhtof"><strong id="uhtof"><small id="uhtof"></small></strong></p>
            <acronym id="uhtof"></acronym>