better-scroll上拉加载 和下拉刷新 的使用(基于vue写成组件的形式)

来源:互联网 发布:小米软件推送关闭 编辑:程序博客网 时间:2024/05/21 06:17

`




import BScroll from 'better-scroll' export default { props: { /** * 1 滚动的时候会派发scroll事件,会截流。 * 2 滚动的时候实时派发scroll事件,不会截流。 * 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件 */ probeType: { type: Number, default: 1 }, /** * 点击列表是否派发click事件 */ click: { type: Boolean, default: false }, /** * 是否开启横向滚动 */ scrollX: { type: Boolean, default: false }, /** * 是否派发滚动事件 */ listenScroll: { type: Boolean, default: false }, /** * 列表的数据 */ data: { type: Array, default: null }, /** * 是否派发滚动到底部的事件,用于上拉加载 */ pullup: { type: Boolean, default: false }, /** * 是否派发顶部下拉的事件,用于下拉刷新 */ pulldown: { type: Boolean, default: false }, /** * 是否派发列表滚动开始的事件 */ beforeScroll: { type: Boolean, default: false }, /** * 当数据更新后,刷新scroll的延时。 */ refreshDelay: { type: Number, default: 20 } }, mounted () { // 保证在DOM渲染完毕后初始化better-scroll setTimeout(() => { this._initParms() this._initScroll() }, 20) }, methods: { _initParms () { this.options = { click: true, probeType: 3, // 滑动过程中派发scroll事件 pullDownRefresh: { threshold: 50, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件 stop: 40 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置 }, pullUpLoad: { threshold: -40// 在上拉到超过底部 20px 时,触发 pullingUp 事件 }, scrollbar: false } }, _initScroll () { if (!this.refs.wrapper)return//betterscrollthis.scroll=newBScroll(this.refs.wrapper, this.options) console.log(this.scroll) // 是否派发滚动事件 if (this.listenScroll) { let me = this this.scroll.on('scroll', (pos) => { me.$emit('scroll', pos) }) } // 是否派发滚动到底部事件,用于上拉加载 if (this.pullup) { this.scroll.on('scrollEnd', (pos) => { // 滚动到底部、 if (pos.y
阅读全文
0 0
原创粉丝点击