小编 / 达叔小生
小程序开发基础-scroll-view 可滚动视图区域
这里只展示纵向滚动，横向同理就不用说明了，可自己尝试，横向滚动属性为scroll-x，把纵向滚动改为横向滚动即可。
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属性。
"true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
...
复制代码给这个视图组件加几个视图，一个视图高度以给定"height:200px"
"green" class="scroll-view-item bc_green">
"red" class="scroll-view-item bc_red">
"yellow" class="scroll-view-item bc_yellow">
"blue" class="scroll-view-item bc_blue">
复制代码再给两个按钮，一个是点击效果为，下一个视图，如同翻页的效果，点击按钮切换到下一个view，另一个按钮的点击效果为，设置滚动条位置实现画面滚动，就是下移或上移等。
click me to scroll into view为点击我跳转到下一个view视图 click me to scroll为点击我进行滚动
"true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
"green" class="scroll-view-item bc_green">
"red" class="scroll-view-item bc_red">
"yellow" class="scroll-view-item bc_yellow">
"blue" class="scroll-view-item bc_blue">
"btn-area">
复制代码scroll-view属性表格
| 属性名 | 说明 |
|---|---|
| scroll-x | 表示允许横向滚动 |
| scroll-y | 表示允许纵向滚动 |
| upper-threshold | 表示距顶部或者左边多远时（单位为px），触发scrolltoupper事件 |
| lower-threshold | 表示距底部或者右边多远时时（单位为px），触发scrolltolower事件 |
| scroll-top | 表示设置竖向滚动条位置 |
| scroll-left | 表示设置横向滚动条位置 |
| scroll-into-view | 表示指应为某子元素id（id不能以数字开头），设置哪个方向可滚动，则在哪个方向滚动到该元素 |
| scroll-with-animation | 表示在设置滚动条位置时使用动画过渡 |
| bindscrolltoupper | 表示滚动到顶部或左边，会触发scrolltoupper事件 |
| bindscrolltolower | 表示滚动到底部或右边，会触发scrolltolower事件 |
| bindscroll | 表示滚动时触发 |
| enable-back-to-top | 表示iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 |
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中有了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
}
}
},
复制代码重要事项：
开源github分享
Wechat_small_program_Share 微信小程序分享? Github 欢迎 Star、Fork
结语
- 本文主要讲解 小程序开发基础-scroll-view 可滚动视图区域
- 下面我将继续对其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞