十八.局部滚动组件 scroll-view

你的名字 2023-07-09 02:21 9阅读 0赞

# 微信小程序可滚动视图区域 scroll-view #

可滚动视图区域.

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll-x</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>允许横向滚动</td> 
  </tr> 
  <tr> 
   <td>scroll-y</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>允许纵向滚动</td> 
  </tr> 
  <tr> 
   <td>upper-threshold</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>距顶部/左边多远时(单位px), 触发scrolltoupper事件</td> 
  </tr> 
  <tr> 
   <td>lower-threshold</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>距顶部/右边多远时(单位px), 触发scrolltolower事件</td> 
  </tr> 
  <tr> 
   <td>scroll-top</td> 
   <td>Number</td> 
   <td></td> 
   <td>设置竖向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-left</td> 
   <td>Number</td> 
   <td></td> 
   <td>设置横向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-into-view</td> 
   <td>String</td> 
   <td></td> 
   <td>值应为某子元素id(id不能以数字开头). 设置哪个方向可以滚动, 则在哪个方向滚动到该元素</td> 
  </tr> 
  <tr> 
   <td>scroll-with-animation</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>在设置滚动条位置时使用动画过渡</td> 
  </tr> 
  <tr> 
   <td>enable-back-to-top</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>IOS点击顶部状态栏、安卓双击标题栏时, 滚动条返回顶部, 只支持竖向</td> 
  </tr> 
  <tr> 
   <td>bindscrolltoupper</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td>滚动到顶部/左边, 会触发scrolltoupper事件</td> 
  </tr> 
  <tr> 
   <td>bindscrolltolower</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td>滚动到底部/右边, 会触发scrolltolower事件</td> 
  </tr> 
  <tr> 
   <td>bindscroll</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td>滚动时触发, event.detall = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td> 
  </tr> 
 </tbody> 
</table>

使用竖向滚动时, 需要给`<scroll-view/>`一个固定高度, 通过WXSS设置height.