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

àì夳堔傛蜴生んèń 2022-03-10 08:00 487阅读 0赞

### 文章目录 ###

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

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

scroll-view 的属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
代码示例  
在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</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("绑定滚动事件 ");
      }
    })

效果如图, 在滚动时会触发一些事件  
![20190310121522370.png][]  
在页面右侧会出现滚动条  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

### 二. 可滚动的横向的组件 ###

要使用横向的组件, 那么就需要把`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</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
    }

显示如下, 可以进行左右的滚动  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/ba59968cbbd34c9697b97ee9c80b527d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/6e49fc0543d041829834d49ad15a28b9.png
[20190310121522370.png]: /images/20220310/0edb8f1ee24240d7ba81bbc05d3a6e8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/1e212d12821948a0bd3cd5faa3a2b083.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220310/fd94e8f5c04b41f5a0acb7e725a65066.png