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ā)表評論

信丰县| 江城| 马鞍山市| 庆阳市| 旅游| 莱西市| 通榆县| 垫江县| 宾川县| 武川县| 阿勒泰市| 万载县| 杭锦后旗| 东安县| 龙江县| 新田县| 二手房| 美姑县| 新巴尔虎左旗| 清徐县| 郧西县| 桂平市| 泰顺县| 定日县| 锡林郭勒盟| 青海省| 青州市| 永寿县| 雷州市| 鄢陵县| 汽车| 五家渠市| 米脂县| 永泰县| 阆中市| 苍南县| 繁昌县| 珠海市| 塔城市| 罗田县| 汝阳县|