微信小程序基于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	重置刷新状态	`-`

chaunjie / weapp-scroll-view-refresh Goto Github PK

weapp-scroll-view-refresh's Introduction

微信小程序 基于scroll-view 下拉刷新

说明

展示

使用

安装组件

使用示例

API

组件参数

Event

函数

更多说明

weapp-scroll-view-refresh's People

Contributors

Stargazers

Watchers

Forkers

weapp-scroll-view-refresh's Issues

Recommend Projects

Recommend Topics

Recommend Org

微信小程序基于scroll-view 下拉刷新