Weapp Scroll View Refresh Save
wechat weapp scroll-view refresh component
Project README
微信小程序 基于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 | 组件刷新操作的时候触发该事件 | 无回传参数 |
函数
| 事件名 | 说明 | 参数 |
|---|---|---|
| reset | 重置刷新状态 | - |
更多说明
参考原版插件。
Open Source Agenda is not affiliated with "Weapp Scroll View Refresh" Project. README Source: Chaunjie/weapp-scroll-view-refresh
Stars
60
Open Issues
1
Last Commit
5 years ago
Repository
Open Source Agenda Badge
