• scroll-view 可滚动视图区域
  • 属性说明
  • 示例
    • 代码示例 1：纵向滚动
    • 代码示例 2：横向滚动
  • Bug & Tip
  • 常见问题
    • Q：scroll-view 的 scroll-top 设置是否是无效的？

scroll-view 可滚动视图区域

解释：可滚动视图区域，可实现横向滚动和竖向滚动。使用竖向滚动时，需要给定该组件一个固定高度，可以通过 CSS 设置 height 。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：纵向滚动

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description">纵向滚动</view>
  
  
  
 <scroll-view
  
  
  
 class="scroll-view"
  
  
  
 scroll-y
  
  
  
 upper-threshold="1"
  
  
  
 lower-threshold="1"
  
  
  
 scroll-top="{= scrollTop =}"
  
  
  
 scroll-into-view="{= scrollIntoView =}"
  
  
  
 scroll-with-animation="true"
  
  
  
 enable-back-to-top="true"
  
  
  
 bindscrolltoupper="upper"
  
  
  
 bindscrolltolower="lower"
  
  
  
 bindscroll="scroll">
  
  
  
 <!-- 设置box与是scroll-view区域同高是为了滚动条能正常展示 -->
  
  
  
 <view class="box">
  
  
  
 <view id="one" class="color-a">A</view>
  
  
  
 <view id="two" class="color-b">B</view>
  
  
  
 <view id="three" class="color-c">C</view>
  
  
  
 </view>
  
  
  
 </scroll-view> 
  
  
  
 <view class="page-section-btns">
  
  
  
 <view class="next-page" bindtap="tap">下一页</view>
  
  
  
 <view bindtap="tapMove">滚动</view>
  
  
  
 <view class="scroll-to-top" bindtap="scrollToTop">回顶部</view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

代码示例 2：横向滚动

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description">横向滚动</view>
  
  
  
 <scroll-view
  
  
  
 class="scroll-view"
  
  
  
 scroll-x
  
  
  
 bindscrolltoupper="toLeft"
  
  
  
 bindscrolltolower="toRight"
  
  
  
 scroll-left="{= scrollLeft =}"
  
  
  
 upper-threshold="1"
  
  
  
 lower-threshold="1"
  
  
  
 bindscroll="scroll">
  
  
  
 <view id="four" class="color-a row-view">A</view>
  
  
  
 <view id="five" class="color-b row-view">B</view>
  
  
  
 <view id="six" class="color-c row-view">C</view>
  
  
  
 </scroll-view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

Bug & Tip

• Tip：请勿在 scroll-view 中使用 textarea、map、canvas、video 组件；详情请参考原生组件说明。
• Tip：scroll-into-view 的优先级低于 scroll-top、scroll-left 。
• Bug：在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 。
• Tip：若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view 。
• Tip：scroll-into-view、scroll-top、scroll-left 需要在页面数据高度（或宽度）撑开时生效，若有异步加载数据，请在数据渲染完成时，重新动态赋值，才可生效。
• Tip：在设置 scroll-view 组件 height 属性不是内容可视区总高度时，使用 swan.pageScrollTo API 无法生效。
• Tip：暂不支持 border-radius 特性。

常见问题

Q：scroll-view 的 scroll-top 设置是否是无效的？

A：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 CSS 设置 height 。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description">纵向滚动</view>
  
  
  
 <scroll-view
  
  
  
 scroll-y
  
  
  
 style="height: 1.66rem;"
  
  
  
 scroll-into-view="{= toView =}"
  
  
  
 scroll-top="{= scrollTop =}"
  
  
  
 >
  
  
  
 <view id="one" class="color-a">A</view>
  
  
  
 <view id="two" class="color-b">B</view>
  
  
  
 <view id="three" class="color-c">C</view>
  
  
  
 </scroll-view> 
  
  
  
 <view class="page-section-btns">
  
  
  
 <view class="scrollToTop" bindtap="scrollToTop">回顶部</view>
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>