jdvue

Version:

A Vue.js 2.0 Mobile UI components at JinDanLiCai

89 lines (65 loc) • 3.3 kB

Markdown

## 上拉刷新、下拉加载文档 ### Props 配置参数说明类型可选值默认值 datas 用于列表渲染的数据 Array - [] options better-scroll 配置项 Object - { click: true, probeType: 1, scrollbar: false, pullDownRefresh: false, pullUpLoad: false } listenScroll 是否派发 scroll 事件 Boolean true/false false listenBeforeScroll 是否派发 before-scroll-start 事件 Boolean true/false false refreshDelay data属性的数据更新后，scroll 的刷新延时 Number - 20 options中 better-scroll 的几个常用配置项，scrollbar、pullDownRefresh、pullUpLoad这三个配置即可设为 Boolean（false 关闭该功能，true 开启该功能，并使用默认子配置），也可设为Object，开启该功能并具体定制其子配置项。 ### scrollbar 子配置项参数说明类型可选值默认值 fade 是否淡入淡出 Boolean true/false false pullDownRefresh 子配置项参数说明类型可选值默认值 threshold 下拉刷新动作的下拉距离阈值 Number - 90 stop 回弹停留的位置 Number - 40 txt 刷新成功的文案 String - 'Refresh success' pullUpLoad 子配置项参数说明类型可选值默认值 threshold 上拉刷新动作的上拉距离阈值 Number - 0 ### 插槽名字说明作用域参数 default 基于data属性渲染的列表 - pulldown 位于列表上方，会在下拉刷新时显示 pullDownRefresh: 是否开启了下拉刷新功能 pullDownStyle: 移入移出的样式 beforePullDown: 是否正在做下拉操作 isPullingDown: 是否正在拉取数据 bubbleY: 当前下拉的距离 - 50 pullup 位于列表下方，会在上拉加载时显示 pullUpLoad: 是否开启了上拉加载功能 isPullUpLoad: 是否正在加载数据 ### 事件事件名说明参数 click 点击列表项时触发 item - 该列表项的数据 scroll 当 listenScroll 为 true 时，根据 probeType 的值决定派发时机 Object {x, y} - 滚动的实时坐标 beforeScrollStart 当 listenBeforeScroll 属性为 true 时，在滚动开始之前触发 - pullingDown 当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发 - ppullingUp 当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发 - #### tip 1. 如果请求结果是没有新数据，也就是数据与之前一模一样没有变化，则必须使用 this.$refs.scroll.forceUpdate() 结束此次上拉加载，这样，Scroll 组件才会开始监听下一次上拉加载操作 2. 依赖 better-scroll 插件 3. [组件文档参考地址](https://didi.github.io/cube-ui/#/zh-CN/docs/scroll) 4. [better-scroll 地址](http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#pulldownrefresh)