带有下拉刷新的刷新框完全自定义scroll-view组件

更新记录

2.3（2019-09-19）

修复了小bug

2.2（2019-09-18）

修复了多指下滑的bug
修复了低端安卓机的某些问题

2.1（2019-09-18）

修复了无法设置scroll-top的bug 增添了是否开启设置scroll-top时滚动动画的prop scrollAnimation 默认关闭

平台兼容性

完全自定义的带有下拉刷新的scroll-view组件

看到很多人都需要下拉刷新的scroll-view组件 , 也有很多是从自己项目中抽离出来的组件 . 前端不是设计师 , 而且也难以定制样式 , 授人🐟不如授之以渔 , 所以我这边写了一个基于scroll-view的带下拉刷新的组件 . 我这边只封装了逻辑和进行优化组件的性能 .

9.14日更新说明

大致说明下效果下拉跟手, 下拉距离至超过设置值时可以有回弹后暂停继续回弹的效果,可以参照手机QQ的下拉刷新效果 ; 过程中有钩子事件 , 你可以改变下拉框的内容和发送请求或别的操作 .

自定义属性

downLoading: {
            //控制下面下拉加载区的显示 , 默认关闭 , 可改变来控制显示
            type: Boolean,
            default: false
        },
        scrollHeight: {
            //scroll显示区的高度(px)
            type: Number,
            default: 500
        },
        topHeight: {
            //下拉区的高度(px)
            type: Number,
            default: 60
        },
        interruptPosition: {
            //暂停区的高度(px)
            type: Number,
            default: 40
        },
        damping: {
            //回弹动画的速度 , 值越大越快
            type: Number,
            default: 50
        },
        scrollTop:{
            //即scroll-top属性 设置竖向滚动条位置
            type:Number,
            default:0
        },

事件和下拉时的钩子

原有事件 @scroll @scrolltoupper @scrolltoupper

重要事件!

@backToInterrupt拉回达到interruptPosition就会触发这个钩子

@pushToInterrupt 下拉达到interruptPosition就会触发这个钩子下拉过程中只会执行一次

上面两个事件都是在用户未松手时触发 , 可以重复触发

@interrupt 回弹暂停的钩子,此时高度为interruptPosition,参数为解除回弹暂停的函数

@finished 最后回弹结束时的钩子,只在执行了回弹暂停的函数后才执行

插槽

<template slot="top"></template>
<template slot="content"></template>
<template slot="bottom"></template>

top对应传入提示文字内容整个下拉框要因为要设置height的变化所以无法移除设置了 position:relative , 你可以 slot可以设置position:absolute来控制居中之类的如果有有要求可以回到源码中改比如

<template slot="top">
<view :style="
'position: absolute;
bottom: 0px;height: ' + 40 + 'px;
line-height:' + 40 + 'px;
width: 100%;
text-align: center;'">
{{tip}}</view>
</template>
//设置 position: absolute;bottom: 0px; 可以使提示文字一直在下拉框底部
//上面提到interruptPosition建议为slot的view的高度40 以保证暂停时文字的居中

代码
 <view
      :style="'position:relative;height:'+topHeight+'px'"
    >
      <slot name="top"></slot>
    </view>
//其他样式也可自行修改

其他两个content即为view-scroll的内容 bottom为底部加载的内容(默认关闭)

示例

<view class="content">
        <refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g">
            <template slot="top">
                    <view :style="'position: absolute;
                                bottom: 0px;
                                height: ' + 40 + 'px;
                                line-height:' + 40 + 'px;
                                width: 100%;
                                   text-align: center;'">{{tip}}</view>
            </template>
            <template slot="content">
                <view v-for="index in 5" :key="index" class="" style="height: 500px;background:#B2B2B2;border: #2C405A 1px solid;">在美国总统眼里，一切都是生意，只要是生意他不在乎用什么手段。他更喜欢用敲诈勒索，刮地三尺来榨取别国的血汗钱来实现美国的伟大。就在这段日子里，美国总统喊话日韩，要求韩国上交50亿美元保护费，要求日本支付比现在多5倍的保护费，如果不给，就等着美国的怒火吧。美国总统这种做法给了日韩很大的压力，他们在给与不给的选择上左右为难，然而有一个国家却不管美国总统的臭毛病。要求韩国上交50亿美元保护费，要求日本支付比现在多5倍的保护费，如果不给，就等着美国的怒火吧。美国总统这种做法给了日韩很大的压力，他们在给与不给的选择上左右为难，然而有一个国家却不管美国总统的臭毛病。
                </view>
            </template>
            <template slot="bottom">
                <view>
                11111111111111111111111111111111111111111111111
                </view>
            </template>
        </refresh>
    </view>
    <script>
import refresh from '@/components/refresh.vue';
export default {
    components: {
        refresh
    },
    data() {
        return {
            tip: '下拉刷新'
        };
    },
    onLoad() {},
    methods: {
        g(e){},
        interrupt(e) {
            this.tip = '刷新中'
            //模拟发送请求
            setTimeout(e, 500);
            this.tip = '刷新成功';
        },
        pushToInterrupt() {
            this.tip = '释放刷新';
        },
        finished() {
            this.tip = '下拉刷新';
        }
    }
};
</script>

<style></style>

(1)下拉至interrupt,tip:下拉刷新->释放刷新

(2)回弹中断:tip->刷新中,发送请求 ,回调函数 tip->刷新成功 ,执行参数e() 回弹继续

(3)完成整个过程 tip->释放刷新

其他的问题

我这边只测试了h5端和微信小程序开发者工具 , 基本上bug已经被改完了,但是注意小程序端我这边使用的是自定义组件是成功的非自定义组件不成功 , 貌似是uniapp非自定义组件不支持多slot的原因只显示了content的slot(再次吐槽uniapp对插槽支持度不完善slot和slot作用域非常影响插件质量) 你可以把提示移入源码都可以的 . 视极端与否有bug可以在下面反馈下

非常感谢这位作者 , 我采用了他的思路覆写了这个组件 , 其中的写法也有参照 , 完成了性能的优化感谢!