更新记录

1.1.10（2021-10-08）

1.0.9（2021-09-28）

1.0.8（2021-09-28）

更新开始动画的时机

平台兼容性

z-refresh

1 使用插件不需要用import引入 ，直接在页面中使用标签

<z-refresh ref="zfresh" @pullUP="up" :icon="1" @pullDOWN="down"></z-refresh>

pullUP  是上拉加载的触发方法
pullDOWN  是下拉刷新的触发方法

可以使用** this.$refs.zfresh.startLoader = false ** 关闭刷新的关闭动画

增加4种刷新动画。传递 icon属性 比如 icon="1"  

<template>
    <view style="height: 100%; ">
        <view class="box">
            <view class="flex">
                <view :class="'item'+index" v-for="(item,index) in list" @click="changebar(index)">
                    {{item}}
                </view>
            </view>
            <view class=" backitem" :style="'transform: translateX('+distance+'px);' "> </view>
        </view>

        <swiper class="swiper" @change="change">
            <swiper-item v-for="(items,indexs) in list" :key="indexs">
                <z-refresh ref="zfresh" @pullUP="up" @pullDOWN="down" :icon="indexs"  >
                    <view class="" style="display: flex;flex-direction: column;" v-for="(item,index) in list">
                        <view class="" style="width: 100%;height: 100rpx;border: 2rpx solid #b7d9d7;">
                            {{items}}
                        </view>
                    </view>
                </z-refresh>
            </swiper-item>
        </swiper>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [1, 2, 3, 4, 5],
                indexs: 0,
                distance: 0,
                timer: null,
            }
        },
        onReady() {
            this.getElementHeight('.item0');
            console.log(this.$t('1'))
        },
        methods: {
            getElementHeight(element) {
                this.$nextTick(() => {
                    let query = uni.createSelectorQuery().in(this);
                    query.select(element).boundingClientRect();
                    query.exec((res) => {
                        if (!res) { //如果没获取到，再调一次
                            this.getElementHeight(item);
                        } else {
                            this.distance = res[0].left.toFixed(0)

                        }
                    })
                })
            },
            change(e) {
                console.log(e.detail)
                if (this.indexs > e.detail.current) {
                    this.distance = -10
                } else {
                    this.distance = 10
                }

                this.indexs = e.detail.current
                this.getElementHeight('.item' + this.indexs);
            },
            distancetouch(e) {
                console.log(e)
            },
            changebar(e) {
                this.indexs = e
            },
            up() {
                console.log('上拉')
                uni.showToast({
                    title: '上拉'
                })
            },
            down() {
                console.log('下拉')
                setTimeout(() => {
                    this.$refs.zfresh[this.indexs].startLoader = false
                }, 2000)
            }
        }
    }
</script>

<style lang="less">
    page {
        height: 100%;
    }

    .swiper {

        height: 100%;
    }

    .box {
        position: relative;

        .flex {
            display: flex;
            justify-content: space-around;
            height: 60rpx;
            align-items: center;

            .item {
                position: relative;
            }
        }

        .backitem {
            position: absolute;
            bottom: 0;
            width: 10px;
            height: 20rpx;
            background-color: #99f5ff;
            transition: .3s;
            overflow: hidden;
        }
    }

    #body {
        border: 2rpx solid #b0f9ff;
        height: 100%;
    }

    .flex{
        display: flex;
    }
</style>

该插件是 *scroll-view* 配合 *@touchmove* 等触摸方法写的，源码简单易懂，有需求可以自己修改源码