更新记录

2.0.0（2019-11-21）

从HBuilderX 2.3.4起，可直接引用uni.requireNativePlugin('bindingx')模块 使用官方的API 引入 bindingx 模版，避免某些不会用的人吶 瞎喷

1.0.0（2019-09-22）

1.0版本

平台兼容性

如果你的HX不是2.3.4 以上的不要用 不要用 不要用 或者自己升级HX版本

基于nvue的刷新组件；有动画效果，

从HBuilderX 2.3.4起，可直接引用uni.requireNativePlugin('bindingx')模块

模版部分

<template>
    <div class="wxc-demo">

        <list class="scroller" ref="scroller">
            <refresher ref="wxc-refresher" scroller-ref="scroller" main-text="下拉即可刷新(自定义)" pulling-text="释放即可刷新(自定义)"
             refreshing-text="加载中(自定义)" :max-time="5000" :text-width="0" @wxcRefresh="onRefresh" @wxcTimeout="onTimeout"></refresher>
            <cell class="cell" v-for="(num, key) in lists" :key="key">
                <div class="panel">
                    <text class="text">{{ num }}</text>
                </div>
            </cell>
        </list>
    </div>
</template>
<style>
    .wxc-demo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
    }

    .panel {
        width: 600rpx;
        height: 250rpx;
        margin-left: 75rpx;
        margin-top: 35rpx;
        margin-bottom: 35rpx;
        /* flex-direction: column; */
        justify-content: center;
        border-width: 2rpx;
        border-style: solid;
        border-color: #dddddd;
        background-color: #f5f5f5;
    }

    .text {
        font-size: 50rpx;
        text-align: center;
        color: #41b883;
    }

    .scroller {
        flex: 1;
    }
</style>

js 代码部分

    import refresher from '@/components/Simple-refresher/Simple-refresher.nvue';
    export default {
        data() {
            return {
                lists: ['下拉刷新', 'Drop Down', '↓', '↓', '↓', '↓', '↓', '↓'],
                refreshTime: 3000
            };
        },
        components: {
            refresher
        },
        onLoad() {},
        methods: {
            onTimeout() {
                this.sto && clearTimeout(this.sto);
                uni.showToast({
                    title: '刷新超时，可定义超时时间',
                    icon: 'none'
                });
            },
            onRefresh(e) {
                this.sto = setTimeout(() => {
                    this.refreshSucc();
                }, this.refreshTime);
                uni.showToast({
                    title: '刷新中...',
                    icon: 'none'
                });

                this.refreshTime = this.refreshTime === 3000 ? 10000 : 3000;
            },
            refreshSucc() {
                this.$refs['wxc-refresher'].wxcCancel();
                uni.showToast({
                    title: '刷新成功',
                    icon: 'none'
                });
            }
        }
    };