uniapp 实现局部下拉刷新
实现 刷新 局部 uniapp
2023-09-11 14:19:17 时间
<template>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
</scroll-view>
<!-- 内容切换 -->
<view>
<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
:refresher-threshold="100" refresher-background="#FFF" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
<view class="content" v-if="navIndex==0">
我是选项1
</view>
<view class="content" v-if="navIndex==1">
我是选项2
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navIndex: 0,
triggered: false,
tabBars: [{
name: '关注',
id: '1'
}, {
name: '推荐',
id: '2'
}, {
name: '体育',
id: '3'
}],
}
},
onLoad() {
this._freshing = false;
},
methods: {
checkIndex(index) {
console.log(index)
this.navIndex = index;
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
onPulling(e) {
this._freshing = false;
setTimeout(() => {
this.triggered = true;
}, 1000)
// console.log("onpulling", e);
//调接口,等接口回来之后,关闭 this.triggered = true;
console.log("下拉刷新了")
},
onRefresh() {
if (this._freshing) return;
this._freshing = true;
setTimeout(() => {
this.triggered = false;
this._freshing = false;
}, 1000)
},
onRestore() {
this.triggered = 'restore'; // 需要重置
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
}
}
}
</script>
<style scoped>
.activite {
color: #04c9c3;
}
.content {
/* background: #008000; */
height: 300px;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
color: #CCCCCC;
}
.scroll-view-item_H {
display: inline-block;
width: 20%;
height: 50rpx;
line-height: 50rpx;
text-align: center;
padding: 10px 0;
}
</style>
需要注意的是初始化的时候,我们会调接口获取列表数据, this.triggered = true;这个是关掉下拉刷新的,我当时遇到的问题是一进页面就会刷新,发现 this.triggered = true;写在了初始化获取数据成功之后(status==200),然后我 onPulling时,再次调的获取列表这个函数
解决办法是: 我把调接口的代码在onPulling时又写了一遍,接口调用成功, this.triggered = true;
初始化的时候,(不加 this.triggered = true )
相关文章
- PHP网站使用JavaScript和Iframe简单实现部分刷新效果
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- JAVA-JSP内置对象之response对象实现页面自动刷新
- Android UI组件----自定义ListView实现动态刷新
- Java实现 LeetCode 5 最长回文子串
- java实现第五届蓝桥杯海盗分金币
- 110、Android 下拉刷新框架实现(转载)
- 指定DIV局部刷新的简单实现,很简单,但是网上搜到的大部分都很复杂
- 110、Android 下拉刷新框架实现(转载)
- vue 3.2.6:用better-scroll实现上拉加载/下拉刷新/滚动翻页(better-scroll@2.4.2)
- 【安富莱专题教程第1期】基于STM32的硬件RGB888接口实现emWin的快速刷新方案,32位色或24
- 在浏览商品时,点击商品详情,然后返回,要求列表刷新,同时滚动条还在之前的位置,怎么实现?
- Angular应用i18n - internationalization翻译的实现单步调试
- Android LRecyclerView实现下拉刷新,滑动到底部自动加载更多
- ML之FE:数据处理—特征工程之特征选择常用方法之基于搜索策略的三种分类、基于评价准则划分的三种分类(Filter/Wrapper/Embedded)及其代码实现
- Android Listview 自定义实现局部刷新(非notifyDataSetChange())
- QML 中使用 QQuickImageProvider 实现图像动态刷新
- QGraphicsView 如何实现百度地图按照鼠标点进行放大缩小效果
- Qt 实现鼠标左键按下拖住窗口移动
- 基于Vue实现多标签选择器
- 【架构实践】一致性Hash算法原理图文详解 & 使用 golang 实现
- c# 窗体最小化后截图实现
- Vue中vue-i18n结合element-ui实现国际化
- Android实现RecyclerView的下拉刷新和上拉载入很多其它
- 设计图案之间关系的代码实现
- LVS的跨网络DR实现