微信小程序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中的代码如下
<!--index.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</view>
<view id='b' class='b size'>b</view>
<view id='c' class='c size'>c</view>
<view id='d' class='d size'>d</view>
<view id='e' class='e size'>e</view>
</scroll-view>
js中的代码如下
Page({
myupperevent: function(){
console.log("到顶部了");
},
mylowerevent: function(){
console.log("到底部了");
},
bindevent: function(){
console.log("绑定滚动事件 ");
}
})
效果如图, 在滚动时会触发一些事件
在页面右侧会出现滚动条
二. 可滚动的横向的组件
要使用横向的组件, 那么就需要把scroll-x
属性设置为true
代码示例
在wxm中的代码如下scroll-left
用于指定横向滚动条的起始位置
<!--margin-top 用于指定上外边距 -->
<scroll-view class='container' scroll-x="true"
style='margin-top:250px'
scroll-left="150rpx">
<view id='a' class='a size'>a</view>
<view id='b' class='b size'>b</view>
<view id='c' class='c size'>c</view>
<view id='d' class='d size'>d</view>
<view id='e' class='e size'>e</view>
</scroll-view>
在css中的代码如下
要设置容器中的组件 white-space: nowrap
,不换行显示
设置每一个元素显示在一行display: inline-block
.container{
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
}
显示如下, 可以进行左右的滚动