99麻豆久久久国产免费福利精品,国产精品成人国产乱,玖玖操,手机看片169,国产精彩视频在线观看,午夜亚洲福利视频,国产伦乱视频

龍巖易富通網(wǎng)絡(luò )科技有限公司

龍巖小程序開(kāi)發(fā),龍巖分銷(xiāo)系統

小程序之scroll-view組件

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

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

滾動(dòng)視圖分為橫向滾動(dòng)和縱向滾動(dòng)兩種方式,下面我們對視圖的滾動(dòng)進(jìn)行一一說(shuō)明。

橫向滾動(dòng)

設置橫向滾動(dòng)(必須滿(mǎn)足以下三點(diǎn)):

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

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;

}


贊 (

發(fā)表評論

饶阳县| 隆子县| 秦皇岛市| 漾濞| 郁南县| 昌都县| 冀州市| 陵水| 柘城县| 平安县| 白山市| 杨浦区| 绵阳市| 什邡市| 宜君县| 沈阳市| 呼和浩特市| 海安县| 阳城县| 合阳县| 沅江市| 永福县| 沈阳市| 晋宁县| 江门市| 阿坝| 石阡县| 汪清县| 台山市| 萨嘎县| 弋阳县| 呼伦贝尔市| 兴安县| 萨迦县| 荥经县| 太仆寺旗| 淄博市| 贵港市| 新营市| 昭平县| 郴州市|