微信小程序官方组件展示之视图容器scroll-view

功能描述：
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
属性说明：
WebView

Skyline
组件差异

默认只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

Bug & Tip
tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应开发交互动画
示例代码：
JAVASCRIPT

const order = ['demo1', 'demo2', 'demo3']
Page({
onShareAppMessage() {
 return {
   title: 'scroll-view',
   path: 'page/component/pages/scroll-view/scroll-view'
 }
},
data: {
 toView: 'green'
},
upper(e) {
 console.log(e)
},
lower(e) {
 console.log(e)
},
scroll(e) {
 console.log(e)
},
scrollToTop() {
 this.setAction({
   scrollTop: 0
 })
},
tap() {
 for (let i = 0; i < order.length; ++i) {
   if (order[i] === this.data.toView) {
     this.setData({
       toView: order[i + 1],
       scrollTop: (i + 1) * 200
     })
     break
   }
 }
},
tapMove() {
 this.setData({
   scrollTop: this.data.scrollTop + 10
 })
}
})

WXML：

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

WXSS：

.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

相关文章