微信小程序——基于scroll-view的下拉刷新,上拉加载更多组件

scroll-y(基于scroll-view二次开发的组件)

 可竖向滚动的视图区域,需要给scroll-y组件一个固定的高度。

 
属性 类型 默认值 必填 说明
height String 0px scroll-y组件的固定高度(内部scroll-view视图容器的固定高度),可传入px/rpx。例如:height = "100px" 或者 height = "100rpx"
scroll-top Number 0 设置竖向滚动条位置
refresher-threshold Number  100 设置自定义下拉刷新阈值
refresher-background

String

#f6f6f6 自定义下拉刷新区域背景色
refresher-triggered Boolean false 下拉刷新状态(false表示未下拉,true表示被下拉)
pull-style String circle-progress 下拉样式,默认为circle-progress,可取值:circle-progress、diy(diy:自定义,提供 slot = "pull-animation")
refresh-style String circle 下拉后刷新样式,默认值为circle,可取值:circle、clock、diy(diy:自定义,提供 slot = "refresh-animation")
pull-tip String 下拉刷新 下拉过程中提示字
release-tip String 释放刷新 下拉到可释放位置,提示文字
refresh-tip String 正在刷新中 刷新中文字提示
tip-text-color String #b2b2b2 pull-tip、release-tip、refresh-tip、load-tip 文字的颜色
load-more Boolean false 是否开启上拉加载。默认值为false,取值:false为不开启,true为开启
load-style String circle 上拉加载动画,默认为circle,可取circle、clock、diy(diy:自定义,提供 slot = "load-animation")
load-tip String 正在加载中 上拉加载文字提示,默认字体色为#b2b2b2,字体大小为11px
load-background String #f6f6f6 上拉加载背景色
bindrefresherpulling eventhandle   自定义下拉刷新控件被下拉
bindrefresherrefresh eventhandle   自定义下拉刷新被触发
bindrefreshrestore eventhandle   自定义下拉刷新被复位
bindrefresherabort eventhandle   自定义下拉刷新被终止
bindloadmore eventhandle   上拉加载,通过 event.detail.current 可获取当前页

 

Tip:

  1. 自定义动画一定结合上面属性去完成。

  2. 刷新完成后,通过控制refresher-trigered属性控制刷新结束。

  3. 上拉加载是有节流效果,默认在2000ms触发一次,可通过修改scroll-y.js中的源代码修改执行时间。

组件链接:scroll-y组件

 

posted @ 2020-08-19 09:57  Hgqin  阅读(1507)  评论(0编辑  收藏  举报