引入

  1. {
  2.   "usingComponents": {
  3.     "x-nav-bar":"../assembly/nav-bar/nav-bar",
  4.     "x-scroll":"../assembly/scroll/scroll"
  5.   },
  6.   "state": {
  7.     "list": [
  8.       { "name": "name1" },
  9.       { "name": "name2" },
  10.       { "name": "name3" },
  11.       { "name": "name4" },
  12.       { "name": "name5" },
  13.       { "name": "name6" },
  14.       { "name": "name7" },
  15.       { "name": "name8" },
  16.       { "name": "name9" },
  17.       { "name": "name10" }
  18.     ]
  19.   }
  20. }{
  21.   "usingComponents": {
  22.     "x-scroll":"waft-ui/assembly/scroll/scroll"
  23.   }
  24. }

代码示例

  1. <view class="wrapper">
  2.   <x-nav-bar showArrow="{{true}}" title="测试 scroll 组件"></x-nav-bar>
  3.   <view class="scroll-box">
  4.     <x-scroll onScroll="scroll">
  5.       <view>
  6.         <view a:for="{{list}}" class="item">{{item.name}}</view>
  7.       </view>
  8.     </x-scroll>
  9.   </view>
  10. </view>
import {console, Page, Props, Target, Event, TouchEvent} from 'waft';

export class TestList extends Page {
  constructor(props: Props) {
    super(props);
  }

  scroll(e: Event): void {
    console.log('==== scroll ===='+e.toString());
  }
}

.wrapper {
    background-color:#eeeeee;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.scroll-box{
    width: 200rpx;
    height:500rpx;
    border:1rpx solid red
}

.item{
    width: 200rpx;
    height:100rpx;
    border:1rpx solid green;
}

API

  • props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | scrollDirection | 滚动方向, 默认 y 纵向滚动, x 表示横向滚动 | string | y | | lowerThreshold | 距离底部多少触发 | number | 50 | | scrollTop | 设置滚动条位置(纵向滚动)
    在didmount中动态更新 | number | 0 | | scrollLeft | 设置滚动条位置(横向滚动) | number | 0 | | showScrollbar | 是否展示滚动条 | boolean | false |

  • Events | 事件名 | 说明 | 参数 | | —- | —- | —- | | onScroll | 滚动时触发 |
    | | onScrollStart | 滚动开始时触发 | | | onScrollEnd | 滚动结束时触发 | | | onScrollToLower | 滚动到底部触发 | |