微信小程序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中的代码如下

  a
  b
  c
  d
  e

js中的代码如下

Page({

  myupperevent: function(){
    console.log("到顶部了");
  },

  mylowerevent: function(){
    console.log("到底部了");
  },
  bindevent: function(){
   console.log("绑定滚动事件 ");
  }
})

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

二. 可滚动的横向的组件

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

  a
  b
  c
  d
  e

在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
}

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