小程序开发基础-scroll-view 可滚动视图区域

￡神魔★判官ぃ 2021-09-16 05:46 550阅读 0赞

![标题图][1240]

小编 / 达叔小生

## 小程序开发基础-scroll-view 可滚动视图区域 ##

这里只展示纵向滚动，横向同理就不用说明了，可自己尝试，横向滚动属性为`scroll-x`，把纵向滚动改为横向滚动即可。

![效果图1][1]

`scroll-view`视图组件

`scroll-y`是`scroll-view`的属性，`scroll-y`类型为`Boolean`，默认值为`false`，表示允许纵向滚动，`scroll-y="true"`允许纵向滚动

`bindscrolltoupper`是`scroll-view`的属性，`bindscrolltoupper`类型为`EventHandle`，表示滚动到顶部/左边，会触发`scrolltoupper`事件，顶部/左边，是因为滚动视图可以横向滚动和纵向滚动，`bindscrolltoupper="upper"`定义绑定事件，在逻辑代码中编写，滚动到顶部，触发`scrolltoupper`事件。

`bindscrolltolower`是`scroll-view`属性，与上述`bindscrolltoupper`同理，`bindscrolltolower`的类型也是`EventHandle`，`bindscrolltolower`表示滚动到底部/右边，会触发`scrolltolower`事件，`bindscrolltolower="lower"`表示绑定事件`lower`，会触发`scrolltolower`事件。

`bindscroll`是`scroll-view`属性，类型是`EventHandle`，表示滚动触发，与上述`bindscrolltoupper`属性和`bindscrolltolower`属性范围广，`bindscroll`滚动触发，`event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}`。

在定义`scroll-view`时，要给它一个固定的高度，通过`wxss`也可以内部样式，给设置个`height`属性，如`style="height:200px;"`。

`scroll-into-view`为`scroll-view`的属性，类型为`String`类型，表示值应为某子元素的`id`，甚至哪个方向可滚动，则在哪个方向滚动到该元素。代码中`scroll-into-view="{ {toView}}"`，`toView`的值到`js`中的`data`中。

`scroll-top`为`scroll-view`的属性，类型为`Number`类型，表示值应为设置竖向滚动条位置，同时横向有个`scroll-left`属性。

给这个视图组件加几个视图，一个视图高度以给定`"height:200px"`

再给两个按钮，一个是点击效果为，下一个视图，如同翻页的效果，点击按钮切换到下一个`view`，另一个按钮的点击效果为，设置滚动条位置实现画面滚动，就是下移或上移等。

`click me to scroll into view`为点击我跳转到下一个`view`视图  
`click me to scroll`为点击我进行滚动

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{ { toView}}" scroll-top="{ { scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view>

`scroll-view`属性表格

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll-x</td> 
   <td>表示允许横向滚动</td> 
  </tr> 
  <tr> 
   <td>scroll-y</td> 
   <td>表示允许纵向滚动</td> 
  </tr> 
  <tr> 
   <td>upper-threshold</td> 
   <td>表示距顶部或者左边多远时（单位为<code>px</code>），触发<code>scrolltoupper</code>事件</td> 
  </tr> 
  <tr> 
   <td>lower-threshold</td> 
   <td>表示距底部或者右边多远时时（单位为<code>px</code>），触发<code>scrolltolower</code>事件</td> 
  </tr> 
  <tr> 
   <td>scroll-top</td> 
   <td>表示设置竖向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-left</td> 
   <td>表示设置横向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-into-view</td> 
   <td>表示指应为某子元素<code>id</code>（<code>id</code>不能以数字开头），设置哪个方向可滚动，则在哪个方向滚动到该元素</td> 
  </tr> 
  <tr> 
   <td>scroll-with-animation</td> 
   <td>表示在设置滚动条位置时使用动画过渡</td> 
  </tr> 
  <tr> 
   <td>bindscrolltoupper</td> 
   <td>表示滚动到顶部或左边，会触发<code>scrolltoupper</code>事件</td> 
  </tr> 
  <tr> 
   <td>bindscrolltolower</td> 
   <td>表示滚动到底部或右边，会触发<code>scrolltolower</code>事件</td> 
  </tr> 
  <tr> 
   <td>bindscroll</td> 
   <td>表示滚动时触发</td> 
  </tr> 
  <tr> 
   <td>enable-back-to-top</td> 
   <td>表示<code>iOS</code>点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td> 
  </tr> 
 </tbody> 
</table>

`class="scroll-view-item bc_green"`中，在`wxss`样式定义，高度为`200px`，如果没有就不会出现，你可以自己试试，`margin`属性定义，四周都是`10px`，其它为背景颜色而已。

/* index.wxss */
    /* .scroll-view_H{ white-space: nowrap; } */
    .scroll-view-item{ height: 200px; }
    /* .scroll-view-item_H{ display: inline-block; width: 100%; height: 200px; } */
    
    .btn-area button{ margin: 10px; }
    
    
    
    .bc_green { background-color: green; }
    
    .bc_red { background-color: red; }
    
    .bc_yellow { background-color: yellow; }
    
    .bc_blue { background-color: blue; }

逻辑`index.js`，`upper`为滚动条滚到顶部的时候触发，`lower`为滚动条滚到底部的时候触发，`scroll`为滚动条滚动后触发，`tap`为点击按钮切换到下一个`view`，`tapMove`为通过设置滚动条位置实现画面滚动。

// index.js
    var order = ['red', 'yellow', 'blue', 'green', 'red']
    Page({
      data: {
        toView: 'green',
        scrollTop: 100,
        scrollLeft: 0
      },
      // 滚动条滚到顶部的时候触发
      upper: function(e) { 
        console.log(e)
      },
      // 滚动条滚到底部的时候触发
      lower: function(e) { 
        console.log(e)
      },
      // 滚动条滚动后触发
      scroll: function(e) { 
        console.log(e)
      },
      // 点击按钮切换到下一个view
      tap: function(e) { 
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.data.toView) {
            this.setData({
              toView: order[i + 1]
            })
            break
          }
        }
      },
      //通过设置滚动条位置实现画面滚动
      tapMove: function(e) { 
        this.setData({
          scrollTop: this.data.scrollTop + 10
        })
      }
    })

`toView: 'green'`,为`scroll-into-view`显示在`green`绿色的地方，在`index.wxml`中的`scroll-into-view="{ {toView}}"`，`scrollTop: 100`,为`scroll-top="{ {scrollTop}}"`在显示时就是绿色的占一半，红色的占一半，因为总的才`200px`嘛。

`scroll-top`的用途说明一下，为甚至竖向滚动条位置。`scroll-into-view`为滚动到该元素，简要的说。总的来说，值应为某子元素`id`（`id`不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，可知道要`id`，所以在`index.wxml`中有了`<view id="green" class="scroll-view-item bc_green"></view>`这个描述，里面的`id="green"`。

这样就可以理解以下代码：

data: { toView: 'green', scrollTop: 100, scrollLeft: 0 },
    // scrollLeft:是用来横向的嘛

var order = ['red', 'yellow', 'blue', 'green', 'red']
      // 点击按钮切换到下一个view
      tap: function(e) { 
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.data.toView) {
            this.setData({
              toView: order[i + 1]
            })
            break
          }
        }
      },

重要事项：

![重要事项.png][.png]

## 开源github分享 ##

**[Wechat\_small\_program\_Share][Wechat_small_program_Share]**  
微信小程序分享  
`Github` 欢迎 `Star、Fork`

## 结语 ##

*  本文主要讲解 **小程序开发基础-scroll-view 可滚动视图区域**
 *  下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

![送❤][1240 1]

[1240]: /images/20210724/e7734e278aed42cab765001714470fb5.png
[1]: /images/20210724/9b8829364a3f4962b0113ffbe7da48d3.png
[.png]: /images/20210724/e8c65eab8a0744e1a9f89f5129f6f595.png
[Wechat_small_program_Share]: https://github.com/huangguangda/Wechat_small_program_Share
[1240 1]: /images/20210724/24276bc38b074f4684f3f20ac1497f1e.png