更新记录
1.1.10(2021-10-08)
下载此版本
1.0.9(2021-09-28)
下载此版本
1.0.8(2021-09-28)
下载此版本
更新开始动画的时机
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
× |
× |
× |
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>
属性 |
描述 |
类型 |
@pullUP |
上拉事件 |
@pullDOWN |
下拉事件 |
icon |
刷新的动画 |
number |
该插件是 *scroll-view* 配合 *@touchmove* 等触摸方法写的,源码简单易懂,有需求可以自己修改源码