【scroll-view】 可滚动视图组件说明
scroll-view 可滚动视图容器
原型：
1 <scroll-view 2 scroll-x="[Boolean]" 3 scroll-y="[Boolean]" 4 upper-threshold="[Number]" 5 lower-threshold="[Number]" 6 scroll-top="[Number]" 7 scroll-left="[Number]" 8 scroll-into-view="[String(其子元素ID名称字符串)]" 9 scroll-with-animation="[Boolean]" 10 enable-back-to-top="[Boolean]" 11 bindscrolltoupper="[EventHandle]" 12 bindscrolltolower="[EventHandle]" 13 bindscroll="[EventHandle]" 14 > 15 </scroll-view>
属性：
| 属性 | 是否必需 | 类型 | 默认值 | 说明 |
| scroll-x | 否 | Boolean | false | 是否允许横向滚动 |
| scroll-y | 否 | Boolean | false | 是否允许纵向滚动 |
| upper-threshold | 否 | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | 否 | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scroll-top | 否 | Number | 设置竖向滚动条位置 | |
| scroll-left | 否 | Number | 设置横向滚动条位置 | |
| scroll-into-view | 否 | String | 值为其子元素的id名称。滚动到该对象处使其显示。 | |
| scroll-with-animation | 否 | Boolean | false | 值为true时，滚动时使用动画过渡（通过js控制属性scroll-left值时会看到效果，手动滚动无效果）。 |
| enable-back-to-top | 否 | Boolean | false | iOS点击顶部状态栏(位于标题栏上方)、安卓双击标题栏时，滚动条返回顶部，只支持竖向 |
| bindscrolltoupper | 否 | EventHandle | 滚动到顶部/左边时触发 | |
| bindscrolltolower | 否 | EventHandle | 滚动到底部/右边时触发 | |
| bindscroll | 否 | EventHandle | 滚动时触发 |
注意：
1) 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2) scroll-into-view 的优先级高于 scroll-top
3) 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4) 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
当开启了动画滚动(scroll-with-animation)，且js代码中同时更改scroll-x与scroll-y时，只有最后设置的有效，测试代码如下：
index.wxml
1 <view>属性: scroll-top、scroll-left演示</view> 2 <scroll-view style="width:200px;height:200px;background:#f7f7f7;" 3 scroll-y 4 scroll-x 5 scroll-with-animation 6 scroll-left="{{left}}" 7 scroll-top="{{top}}" 8 scroll-into-view="{{showId}}" 9 enable-back-to-top="{{toTop}}" 10 > 11 <view style="width:300px;">项目1</view> 12 <view>项目2</view> 13 <view>项目3</view> 14 <view>项目4</view> 15 <view>项目5</view> 16 <view>项目6</view> 17 <view>项目7</view> 18 <view>项目8</view> 19 <view>项目9</view> 20 <view>项目10</view> 21 <view>项目11</view> 22 <view>项目12</view> 23 <view>项目13</view> 24 <view>项目14</view> 25 <view id="showIt" style="color:#f00">项目15</view> 26 <view>项目16</view> 27 <view>项目17</view> 28 <view>项目18</view> 29 <view>项目19</view> 30 <view>项目20</view> 31 <view>项目21</view> 32 <view>项目22</view> 33 <view>项目23</view> 34 <view>项目24</view> 35 <view>项目25</view> 36 </scroll-view> 37 38 <button bind:tap="scrollToPos" >点我滚动到距左边100像素，距顶部100像素</button> 39 <button bind:tap="scrollToItem" >点我使"项目15"显示出来</button>
index,js
1 //index.js 2 Page({ 3 data: { 4 left: 0, 5 top: 0, 6 showId : '', 7 animation: true, 8 toTop: true 9 }, 10 11 //事件处理函数 12 scrollToPos: function(){ 13 this.setData({ // 这里同时更改scroll-x与scroll-y，只有最后一项生效（top），因为第二个top动画阻止了第一个left的动画。除非top已在100位置时，left动画才会生效（即第二次点击时左侧会到100像素） 14 left: 100, 15 top: 100 16 }); 17 }, 18 19 scrollToItem: function(){ 20 this.setData({ 21 showId: 'showIt' 22 }); 23 } 24 25 })
