微信小程序之scroll-view横向滚动不能显示

之前在写scroll-view(可滚动视图区域)遇到一个问题,花一点时间记录分享一下,竖向滚动视图没什么大问题,只需要设置height:rpx; 滚动高度区域,然而横向滚动区域就需要注意两个问题了。

(一)实现效果

实现效果

(二)注意设置两个属性

一开始以为只要照着微信官方的文档介绍就可以想怎么写就怎么写了,结果一直调试不出来,按照官方介绍的属性设置了,子元素容器会各占一行,而且,父元素容器会内容换行,试了很多CSS属性,才发现需要设置的两个属性就可以了:

1、display:inline-block; 设置子元素容器为行间模块:

解释一下display的几个常用的属性值,inline , block, inline-block

inline:(1) 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行.
(2)不能更改元素的height,width的值,大小由内容撑开.
(3)可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行.

block:(1)使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
(2)能够改变元素的height,width的值.
(3) 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
inline-block: 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲,就是不独占一行的块级元素。详细说明可以查看这篇文章

子元素容器

2、设置父元素容器white-space: nowrap;容器不换行显示:
父元素容器

如果还有遇到的其他问题,欢迎留言交流。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值