使用插件
better-scroll
安装使用教程http://ustbhuangyi.github.io/better-scroll/doc/installation.html#npm 还是看官网比较好
子组件:
<template> <keep-alive> <div ref="wrapper" class="scroll-wrap"> <div> <div v-if="pulldown" class="pulldown" :style="`margin-top:${dragTip.translate}px`"> <div class="clear" v-if="dragTip.showLoding"> <div class="fl"><img class="logo" src="../../../static/img/loading2.gif"></div> <div class="fl lh30 ml10">{{dragTip.text}}</div> </div> </div> <slot></slot> <div v-if="pullup" class="pullup"> <div class="clear" v-if="!isDone"> <div class="fl"><img class="logo" src="../../../static/img/loading2.gif"></div> <div class="fl lh30 ml10">加载中.....</div> </div> <div class="list-donetip" v-if="!isLoading && isDone"> <slot name="doneTip">没有数据了</slot> </div> </div> </div> </div> </keep-alive> </template> <script> import BScroll from 'better-scroll' export default { props: { probeType: { type: Number, default: 1 }, /** * 点击列表是否派发click事件 */ click: { type: Boolean, default: false }, /** * 是否开启横向滚动 */ scrollX: { type: Boolean, default: false }, /** * 是否派发滚动事件 */ listenScroll: { type: Boolean, default: false }, /** * 列表数据 */ data: { type: [Object, Array, String], default: null }, /** * 是否派发滚动到底部的事件,用于上拉加载 */ pullup: { type: Boolean, default: false }, /** * 是否派发顶部下拉的事件,用于下拉刷新 */ pulldown: { type: Boolean, default: false }, /** * 是否派发列表滚动开始的事件 */ deforeScroll: { type: Boolean, default: false }, /** * 当数据更新后,刷新scroll延时 */ refreshDelay: { type: Number, default: 20 } }, data () { return { dragTip: { text: '下拉刷新', translate: -30, showLoding: false }, isLoading: false, isDone: false } }, mounted () { setTimeout(() => { this._initScroll() }, 20) }, methods: { _initScroll () { if (!this.$refs.wrapper) { // wrapper 滚动的盒子 return } // better-scroll的初始化 this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: true, scrollX: this.scrollX }) // 是否派发滚动事件 if (this.listenScroll) { let me = this this.scroll.on('scroll', (pos) => { if (this.listenScroll) { me.$emit('scroll', pos) } }) } // 是否派发滚动到底部事件,用于上拉加载 if (this.pullup) { this.scroll.on('scrollEnd', () => { if (this.scroll.y <= (this.scroll.maxScrollY + 20)) { // 所有数据加载完毕后 this.$on('infinitescroll.loadedDone', () => { this.isLoading = false this.isDone = true }) // 单次请求数据加载完毕后 this.$on('infinitescroll.finishLoad', (ret) => { this.isLoading = false }) // 重新初始化 this.$on('infinitescroll.reInit', () => { this.isLoading = false this.isDone = false }) this.$emit('scrollToEnd') } }) } // 是否派发顶部下拉事件,用于下拉刷新 if (this.pulldown) { this.scroll.on('scroll', (pos) => { // 显示下拉刷新loding this.dragTip.showLoding = true // 隐藏底部加载loding this.isLoading = false if (pos.y > 30) { this.dragTip.text = '释放刷新' } }) this.scroll.on('touchEnd', (pos) => { if (pos.y > 30) { this.dragTip.translate = 0 this.dragTip.text = '刷新中...' // 重新初始化 this.$on('pullrefresh.finishLoad', this.resetParams) this.$emit('pulldown', pos) } }) } // 是否派发列表滚动开始的事件 if (this.beforeScroll) { this.scroll.on('beforeScrollStart', () => { this.$emit('beforeScroll') }) } }, resetParams () { setTimeout(() => { this.isLoading = false this.isDone = false this.dragTip = { text: '下拉刷新', translate: -30, showLoding: false } }, 100) }, disable () { this.scroll && this.scroll.disable() }, enable () { this.scroll && this.scroll.enable() }, refresh () { this.scroll && this.scroll.refresh() }, scrollTo () { this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments) }, scrollToElement () { this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments) } }, watch: { data () { setTimeout(() => { this.refresh() // eslint-disable-next-line new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, scrollX: this.scrollX }) }, this.refreshDelay) } } } </script> 子组件的调用:
组件引入:
loadDemo () { this.recomInfo = [] // 下拉刷新重新初始化 this.$refs.pullrefresh.$emit('pullrefresh.finishLoad') this.page = 1 this.messageePage({ page: 1, page_size: 5 }) }, loadup () { if (!this.page) return this.page++ // 上拉加载重新初始化 this.$refs.pullrefresh.$emit('infinitescroll.reInit') this.messageePage({ page: this.page, page_size: 5 }) }, messageePage (data) { messageePage(data).then((res) => { if (res[0].length >= 5) { for (res of res[0]) { this.recomInfo.push(res) } // 单次请求数据加载完毕后 this.$refs.pullrefresh.$emit('infinitescroll.finishLoad') } else { // 把page设置成false 数据已经加载完毕了 不用在加载了 for (res of res[0]) { this.recomInfo.push(res) } this.page = false // 所有数据加载完毕后 this.$refs.pullrefresh.$emit('infinitescroll.loadedDone') } }).catch(res => { this.page = false this.$refs.pullrefresh.$emit('infinitescroll.loadedDone') }) },