微信小程序day02_06之小程序scroll-view可滚动纵向与横向视图组件

一 . 可滚动的纵向视图组件

scroll-view 的属性如下 代码示例 在wxss中, 定义如下的样式

.size { width: 100%; height: 150rpx; } .a { background: red; order: 5; flex: 8 } .b { background: gray; order: 4; flex: 6 } .c { background: yellow; order: 3; flex: 4 } .d { background: orange; order: 2; flex: 2 } .e { background: green; order: 1; flex: 1 } 

在wxml中的代码如下

 <scroll-view scroll-y="true" style='height:250px' bindscrolltoupper="myupperevent" upper-threshold="0" bindscrolltolower="mylowerevent" lower-threshold="0" scroll-top="0" enable-back-to-top="true" scroll-with-animation="false" bindscroll="bindevent" scroll-into-view="c"> <view id='a' class='a size'>a myupperevent: function(){ console.log("到顶部了"); }, mylowerevent: function(){ console.log("到底部了"); }, bindevent: function(){ console.log("绑定滚动事件 "); } }) 

效果如图, 在滚动时会触发一些事件 在页面右侧会出现滚动条

二. 可滚动的横向的组件

要使用横向的组件, 那么就需要把scroll-x属性设置为true 代码示例 在wxm中的代码如下 scroll-left用于指定横向滚动条的起始位置

 <scroll-view class='container' scroll-x="true" style='margin-top:250px' scroll-left="150rpx"> <view id='a' class='a size'>a display: flex; white-space: nowrap /* 不换行 */ } .size { width: 250rpx; height: 350rpx; display: inline-block; } .a { background: red; order: 5; flex: 8 } .b { background: gray; order: 4; flex: 6 } .c { background: yellow; order: 3; flex: 4 } .d { background: orange; order: 2; flex: 2 } .e { background: green; order: 1; flex: 1 } 

显示如下, 可以进行左右的滚动