龙岩易富通网络科技有限公司

龙岩小程序开发,龙岩分销系统

小程序之scroll-view组件

2023.08.05 | 302阅读 | 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;

}


赞 (

发表评论