微信小程序(procedure)开发—可滚动视图区域 scroll-view
一。知识点
可滚动视图区域 scroll-view
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
宁波小程序开发对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。
1。index。wxml
[html] view plain copy 在CODE上查看代码（code）片派生到我的代码片 lt;view gt;
lt;view gt;vertical scroll竖直方向 lt;/view gt;
lt;scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" gt;
lt;view id="green" gt; lt;/view gt;
lt;view id="red" gt; lt;/view gt;
lt;view id="yellow" gt; lt;/view gt;
lt;view id="blue" gt; lt;/view gt;
lt;/scroll-view gt;
lt;view gt;
lt;button size="mini" bindtap="tapMove" gt;click me to scroll lt;/button gt;
lt;/view gt; lt;/view gt;
2。index。wxss
[html] view plain copy 在CODE上查看代码（code）片派生到我的代码（code）片。scroll-view_H{
white-space: nowrap; } 。宁波微信小程序开发是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。scroll-view-item{
height: 200px; } 。宁波微信小程序开发是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。scroll-view-item_H{
display: inline-block;
width: 100%;
height: 200px; } #green{
background:green; } #red{
background:red; } #yellow{
background:yellow; } #blue{
background:blue; }
index。js
[html] view plain copy 在CODE上查看代码（code）片派生到我的代码片 lt;span style="font-family:Comic Sans MS;" gt;var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
//滚动条滚到顶部的时候触发
upper: function(e) {
console。log("顶部");
},
//滚动条滚到底部的时候触发
lower: function(e) {
console。log("底");
},
//滚动条滚动后触发
scroll: function(e) {
console。log("滚动");
},
//通过设置滚动条位置（position )实现画面滚动
tapMove: function(e) {
this。setData({
scrollTop: this。data。scrollTop + 10
})
} }) lt;/span gt;
