微信小程序——scroll-view组件之scroll-x、scroll-y

scroll-view组件

功能描述

        可滚动视图区域,详细介绍请参考官方文档【视图容器 scroll-view

通用属性

这里只介绍scroll-x、scroll-y两个属性,用以记录学习中遇到的问题,后期有新的属性问题再进一步补充。

scroll-x 允许横向滚动

使用scroll-x时注意:

1、在子元素<view>的样式中增加display: inline-block,display: inline-block就是​不独占一行​的​块级元素,让多个块元素在一行显示;scroll-x这里不能使用display: flex;

2、scroll-view 要增加样式:white-space:nowrap,意思就是空格不换行。

3、scroll-view宽需要固定。

WXML代码,如下:

<scroll-view class="container1" scroll-x>
  <view> A</view>
  <view> B</view>
  <view> C</view>
</scroll-view>

WXSS代码,如下:


.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  flex: 0 0 50%;
/*display: inline-block就是​不独占一行​的​块级元素,让多个块元素在一行显示;scroll-x这里不能使用display: flex*/
  display: inline-block;

}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightblue;
}

.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  border: 1px solid red;
  width: 120px;
  height: 100px;
/*white-space:nowrap的意思就是空格不换行,scroll-x这里时增加此属性,才可实现特效*/
  white-space: nowrap;
}

效果图:

scroll-y 允许纵向滚动

使用scroll-y时注意:scroll-view宽需要固定。

WXML代码,如下:

<scroll-view class="container1" scroll-y>
  <view> A</view>
  <view> B</view>
  <view> C</view>
</scroll-view>

WXSS代码,如下:

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;

}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightblue;
}

.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

效果展示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值