1.0.1 • Published 5 years ago
weapp-scroll-view-refresh v1.0.1
微信小程序 基于scroll-view 下拉刷新
说明
由于官方scroll-view组件只有滚到顶部刷新的机制，对用户来说不是很友好，所以做一个基于scroll-view的下拉刷新组件（该组件支持原生引用、wexp框架、wepy框架）
展示
使用
安装组件
npm i weapp-scroll-view-refresh -S --production使用示例
usingComponents: {
'k-scroll': 'weapp-scroll-view-refresh/index'
} <k-scroll
id="k-scroll"
custom-class="scroll-view"
bind:refresh="refresh"
bind:scroll="scroll"
bind:lower="lower">
<view>content</view>
</k-scroll>API
组件参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| lowerThresHold | 距底部多远时触发 scrolltolower 事件 | Number | | 50 |
| scrollWithAnimation | 在设置滚动条位置时使用动画过渡 | Boolean | true false | false |
| enableBackToTop | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | Boolean | true false | false |
| scrollIntoView | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | String | | |
Event
| 事件名 | 说明 | 参数 |
|---|---|---|
| bind:scroll | 组件滚动触发该事件 | event.detail: 回传滚动的高度 |
| bind:scrollToLower | 组件滚动到底部触发该事件 | 无回传参数 |
| bind:refresh | 组件刷新操作的时候触发该事件 | 无回传参数 |
更多说明
参考原版插件。