微信小程序开发基础(六)组件之scroll-view滚动视图
小程序里很多时候都需要用到滚动视图,例如下面的这个例子里
这就需要用到scroll-view
组件
<scroll-view>
首先来做一个横向滚动的样例
1 | <scroll-view> |
1 | .scrOut{display: flex;flex-wrap: nowrap;} |
flex: 0 0 100px
表示不放大(0
),不缩小(0
),原始大小(100px
),详情可以参考这篇
但其实上,目前它还不能滚动,因为还没有给它添加属性
scroll-x
这个属性的意义是允许横向滚动,默认为false
将它添加到<scroll-view>
上,可以看见已经能成功滚动了
scroll-left
设置默认的起始位置
例如这里每个格子的大小是100px
,而将起始位置设置成150px
后,应当从第2个格子的一半开始,渲染出来也是这一结果
类似的,还有竖向滚动的样例
1 | <scroll-view class="scroll2" scroll-y scroll-top="150px"> |
1 | .scroll2{height: 350px;} |
还有更多的属性会在学完JS后补充
评论
GiscusTwikoo