【scroll-view】 可滚动视图组件说明

scroll-view 可滚动视图容器

原型：

 <scroll-view
   scroll-x="[Boolean]"
   scroll-y="[Boolean]"
   upper-threshold="[Number]"
   lower-threshold="[Number]"
   scroll-top="[Number]"
   scroll-left="[Number]"
   scroll-into-view="[String(其子元素ID名称字符串)]"
   scroll-with-animation="[Boolean]"
   enable-back-to-top="[Boolean]"
   bindscrolltoupper="[EventHandle]"
   bindscrolltolower="[EventHandle]"
   bindscroll="[EventHandle]"
 >
 </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

 <view>属性: scroll-top、scroll-left演示</view>
 <scroll-view style="width:200px;height:200px;background:#f7f7f7;"
              scroll-y
              scroll-x
              scroll-with-animation
              scroll-left="{{left}}"
              scroll-top="{{top}}"
              scroll-into-view="{{showId}}"
              enable-back-to-top="{{toTop}}"
              >
   <view style="width:300px;">项目1</view>
   <view>项目2</view>
   <view>项目3</view>
   <view>项目4</view>
   <view>项目5</view>
   <view>项目6</view>
   <view>项目7</view>
   <view>项目8</view>
   <view>项目9</view>
   <view>项目10</view>
   <view>项目11</view>
   <view>项目12</view>
   <view>项目13</view>
   <view>项目14</view>
   <view id="showIt" style="color:#f00">项目15</view>
   <view>项目16</view>
   <view>项目17</view>
   <view>项目18</view>
   <view>项目19</view>
   <view>项目20</view>
   <view>项目21</view>
   <view>项目22</view>
   <view>项目23</view>
   <view>项目24</view>
   <view>项目25</view>
 </scroll-view>

 <button bind:tap="scrollToPos" >点我滚动到距左边100像素，距顶部100像素</button>
 <button bind:tap="scrollToItem" >点我使"项目15"显示出来</button>

index,js

 //index.js
 Page({
   data: {
     left: 0,
     top: 0,
     showId : '',
     animation: true,
     toTop: true
   },

   //事件处理函数
   scrollToPos: function(){
     this.setData({ // 这里同时更改scroll-x与scroll-y，只有最后一项生效（top），因为第二个top动画阻止了第一个left的动画。除非top已在100位置时，left动画才会生效（即第二次点击时左侧会到100像素）
       left: 100,
       top: 100
     });
   },

   scrollToItem: function(){
       this.setData({
         showId: 'showIt'
       });
     }

 })