【uniapp】页面下拉刷新(uniapp按钮)

【uniapp】页面下拉刷新

目录

一、全局

二、局部

1、一个页面一个下拉刷新

2、一个页面多个下拉刷新（切换时滚动条回到顶部）

3、一个页面多个下拉刷新（切换时恢复滚动条位置）

---

一、全局

推荐整理分享【uniapp】页面下拉刷新(uniapp按钮)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp底部弹出框,uniapp按钮,uniapp 首页,uniapp设置首页,uniapp实现下拉弹出新页面,uniapp底部弹出框,uniapp界面,uniapp 首页,内容如对您有帮助，希望把文章链接给更多的朋友！

修改pages.json的"enablePullDownRefresh": true,

{    "pages": [         {            "path": "pages/tabBar/dashboard/index",            "style": {                "navigationBarTitleText": "项目管理",                "enablePullDownRefresh": true,                "navigationBarTextStyle": "white",                "navigationBarBackgroundColor": "#374449"            }        },    ],    "globalStyle": {        "navigationBarTextStyle": "black",        "navigationBarTitleText": "管理平台",        "navigationBarBackgroundColor": "#F8F8F8",        "backgroundColor": "#F8F8F8"    },}

页面中（onPullDownRefresh 处理函数和onLoad等生命周期函数同级 ）

export default {    data() {            return {                productList: [], //列表                query: {                    keyword: '', //搜索框                    pagesize: 10,                    page: 1,                },                total: 0, //总条数                showTotal: true, //是否显示“下拉加载更多~”            }        },        // 下拉刷新        onPullDownRefresh() {            var allTotal = this.query.page * this.query.pagesize            //this.page为加载次数，this.pageSize为每一次加载的数据条数            if (allTotal < this.total) {                //this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码                this.showTotal = true;                this.query.page++;                //加载次数递加                this.getlist() //请求更多数据列表            } else {                this.showTotal = false;            }            uni.stopPullDownRefresh();//停止刷新        },}二、局部

我使用的是插件https://ext.dcloud.net.cn/plugin?id=343

插件文档https://www.mescroll.com/uni.html 

这个插件的还有相对应的案例我已经下载下来了，到时候直接放到编辑器打开即可 链接：https://pan.baidu.com/s/1q6IB-mCdCQqcvKaZmzJtcg 提取码：e66j

我的需求是顶部内容固定不动，列表下拉刷新（没有页码，数据一次性展示） 

1、一个页面一个下拉刷新

页面使用

<template><view class="details-container"><view class="example-body"><view v-for="(item,index) in tags" :key="index":class="whichSelected===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"@click="selectState(index)">{{item}}</view></view><view class="center" v-show="tabs===0"> <!-- 第一步：参数一个都不能少，三个事件是固定的 --><mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback":down="downOption" :up="upOption"><Tree :list="list" :local='local'></Tree></mescroll-body></view></view></template><script>import Tree from '../../components/Tree/index.vue' //第二步：引入import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";export default {mixins: [MescrollMixin],//第二步：引入name: 'Details',components: {Tree,},data() {return {tags: [],whichSelected: 0, //标签tabs: 0, //标签对应页面list: [], //列表content: {}, //上一页数据local: '', //第三步：数据//downOption和upOption的参数配置在mescroll-uni.js中查看downOption: {auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)},upOption: { use: false, // 是否启用上拉加载; 默认true auto: false }};},onLoad(e) {let that = thisthis.local = uni.getLocale()this.content = JSON.parse(e.item)if (this.local === 'zh-Hans') {uni.setNavigationBarTitle({title: that.content.Name,})} else {uni.setNavigationBarTitle({title: that.content.Name_EN,})}this.GetFileListById()this.tags.push(this.$t('word.whole'))},methods: { //第三步：事件/*下拉刷新的回调 */downCallback() { let that = thisthis.api.GetFileListById({ //调用接口datagramsid: that.content.Id}).then(res => {that.list = res.data.Data this.$nextTick(() => { this.mescroll.endSuccess(this.list.length) })}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})}, /*上拉 */upCallback() { let that = thisthis.api.GetFileListById({ //调用接口datagramsid: that.content.Id}).then(res => {that.list = res.data.Data let curPageLen = this.list.length; // 接口返回的是否有下一页 (true/false) let hasNext = false; setTimeout(() => { this.mescroll.endSuccess(curPageLen, hasNext) }, 20)}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},GetFileListById() {let that = thisthis.api.GetFileListById({datagramsid: that.content.Id}).then(res => {that.list = res.data.Data})},}}</script>2、一个页面多个下拉刷新（切换时滚动条回到顶部）

多页tabs切换，实现下拉刷新（没有页码，数据一次性展示） ，每个tab页面内容都不相同

插件上说不能使用v-if，是因为使用了v-if就不能实现切换tabs恢复滚动条位置（v-if是创建和销毁，v-show是隐藏和显示）。

但是我使用官方示例的代码重新加载列表数据或其他的方法都不行

// 详情返回列表,重新加载列表数据onShow() {this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页 this.canReset && this.mescroll.scrollTo(0,0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题 this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false// 注意: 子组件没有 onShow 的生命周期, 所以// 对于 mescroll-more.vue 和 mescroll-swiper.vue 的返回刷新, 需更新 1.3.3 版本, 且参考对应示例的onShow写法}

若是换成mescroll-body，并且使用v-show会出现切换tabs滚动条位置一致，也就是上一页滚动条在哪，下一页的滚动条就在哪。找了好久也不知道问题出在哪里，最后我只能写成组件使用mescroll-uni+v-if的方法。

但是你们使用还是要先根据官网来做，如果出现我这样的问题再安装我的方法做 

第一步：创建组件放置tabs所对应的页面（这里我就只写一个子组件的格式）

pages/word/components/all.vue

注意：子组件使用onShow、onLoad无效，需要写在created中才行 

<template><!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )--><view v-if="i === index"><mescroll-uni ref="mescrollRef0" top="92" @init="mescrollInit" @down="downCallback" @up="upCallback":down="downOption" :up="upOption"><!-- 数据列表 --><Tree :list="list" :local='local'></Tree></mescroll-uni></view></template><script>import Tree from '@/components/Tree/index.vue'import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";export default {mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)components: {Tree,},props: {i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)type: Number,default () {return 0}},tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传type: Array,default () {return []}}},data() {return {list: [], //下载列表local: '',downOption: {auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)},upOption: { use: false, // 是否启用上拉加载; 默认true auto: false }}},created() {this.local = uni.getLocale()},methods: {/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */downCallback() {this.mescroll.resetUpScroll()},upCallback(page) {let pageNum = page.numthis.api.GetFileTreeJson().then(res => {// console.log(res.data.Data)this.list = res.data.Datathis.mescroll.endByPage(this.list.length, 1);//设置列表数据if (page.num == 1) this.list = []; //如果是第一页需手动制空列表this.list = this.list.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},}}</script>

pages/word/components/downitem.vue和上一个组件一致，只不过数据组件不一致，多了一个获取列表的方法给父组件使用

<template><!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )--><view v-if="i === index"><mescroll-uni ref="mescrollRef1" @init="mescrollInit" top="92" :down="downOption" @down="downCallback":up="upOption" @up="upCallback" @emptyclick="emptyClick"><DownTree :records="records" :local='local'></DownTree></mescroll-uni></view></template><script>import DownTree from '@/components/DownTree/index.vue'import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";export default {mixins: [MescrollMixin, MescrollMoreItemMixin],components: {DownTree},props: {i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)type: Number,default () {return 0}},tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传type: Array,default () {return []}}},data() {return {records: [], //下载列表local: '',downOption: {auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)},upOption: { use: false, // 是否启用上拉加载; 默认true auto: false }}},created() {this.local = uni.getLocale()},methods: {/*下拉刷新的回调 */downCallback() {this.mescroll.resetUpScroll()},upCallback(page) {let pageNum = page.numthis.api.GetWxUserDownloadList().then(res => {this.records = res.data.Datathis.mescroll.endByPage(this.records.length, 1);//设置列表数据if (page.num == 1) this.records = []; //如果是第一页需手动制空列表this.records = this.records.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},getrecords() {this.api.GetWxUserDownloadList().then(res => {this.records = res.data.Datathis.mescroll.endByPage(this.records.length, 1);//设置列表数据if (page.num == 1) this.records = []; //如果是第一页需手动制空列表this.records = this.records.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},}}</script>

第三步：在页面中使用pages/word/components/index.vue

<template><view class="word-container"><view class="example-body"><view v-for="(item,index) in tags" :key="index":class="tabIndex===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"@click="tabChange(index)" @input="changeload" v-model="tabIndex">{{item}}</view></view><!-- 全部 --><mescroll-all ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tags"></mescroll-all><!-- 下载记录 --><MescrollDown ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tags"></MescrollDown></view></template><script>import MescrollAll from "./components/all.vue";import MescrollDown from "./components/downitem.vue";import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";export default {mixins: [MescrollMoreMixin],name: 'Word',components: {MescrollDown,MescrollAll,},data() {return {tags: [],local: '',tabIndex: 0,//标签对应页面};},onLoad() {this.tags.push(this.$t('word.whole'), this.$t('word.download'))uni.setNavigationBarTitle({title: this.$t('pages.word'),})},onShow() {this.tabIndex = this.$store.state.tabsthis.local = uni.getLocale()if (this.whichSelected === 1) {const Token = uni.getStorageSync('GetPhone_Token')if (Token) { //点击下载列表tab的时候要判断有没有token，没有就要跳转到登录页，我登录成功后返回到这一页 //若是我不调用子组件的方法也就是获取列表数据，会出现一直显示加载中，所以我这里调用了方法，下面的标签切换同理this.$refs.mescrollItem1.getrecords()} else {uni.navigateTo({url: '/pages/login/index'});}} },methods: {// 标签切换tabChange(index) {this.whichSelected = indexthis.tabIndex = indexthis.$store.commit('SET_TABS', index)if (this.tabIndex === 1) {const Token = uni.getStorageSync('GetPhone_Token')if (Token) {this.$refs.mescrollItem1.getrecords()} else {uni.navigateTo({url: '/pages/login/index'});}} },}}</script><style lang="scss">.vue-ref {padding: 0 !important;}.word {&container {position: relative;}}.left {display: flex;margin: 10px;}.example-body {display: flex;padding: 10px 20px;background-color: #fff;width: 100%;position: fixed;z-index: 2;}.center {position: absolute;top: 45px;width: 100%;// height: 100%;border-top: 1px solid #e5e5e5;}.stateBtnSelected {background-color: #bbe5ff;color: #1480cd !important;border-radius: 20px;font-size: 14px;height: 25px;line-height: 25px;// width: 60px;margin: 0 5px;padding: 0 15px;text-align: center;}.stateBtnNoselect {background-color: transparent;color: #8f939c !important;border: none !important;font-size: 14px;height: 25px;line-height: 25px;// width: 60px;margin: 0 5px;padding: 0 15px;text-align: center;}.slot-image {width: 30px;height: 30px;}.slot-box {margin-right: 10px;}.uni-list-item__container {align-items: center !important;line-height: 20px;}</style>3、一个页面多个下拉刷新（切换时恢复滚动条位置）

如果tabs对应内容分别封装成各自组件，子组件封装的时候使用mescroll-uni，并且使用v-show会出现当列表数据多页时切换tabs，恢复滚动条位置不准确并且会触发上拉这样的问题。但是如果我把他放在一个组件里就不会产生这样的问题

 第一步：组件pages/word/components/all.vue

Tree和DownTree组件使用的是uni-list的自定义插槽，不知道为啥我使用uni-list-item就会触发一次上拉，之后就不会了，但是不使用就不会触发

<template><view class="word-container"><!-- 使用这个切换tabs的时候，会触发上拉一次，之后就不会再触发了 --><!-- <uni-list><uni-list-item v-for="(item,index) in records" :key='index':title="local==='zh-Hans'?item.filename:item.filename_EN" thumb-size="lg":rightText="item.DownloadTime"><template v-slot:header><view class="slot-box"><image v-if="item.fileExt==='.mp4'" class="slot-image" src="/static/shipin_lvhangyingxiang.png"mode="widthFix"></image><image v-else-if="item.fileExt==='.pdf'" class="slot-image" src="/static/pdfwenjian.png"mode="widthFix"></image><image v-else class="slot-image" src="/static/a-wenjianjiawenjian.png" mode="widthFix"></image></view></template></uni-list-item></uni-list> --><uni-list v-for="(item,j) in records" :key='j'><view :border="none" :padding="0" :spacing="0" style="padding:0" :is-shadow="false" :isFull="true"><view class="card-title" style="display: flex;justify-content: space-between;"><view><image v-if="item.fileExt==='.mp4'" class="slot-image" src="/static/shipin_lvhangyingxiang.png"mode="widthFix"></image><image v-else-if="item.fileExt==='.pdf'" class="slot-image" src="/static/pdfwenjian.png"mode="widthFix"></image><image v-else class="slot-image" src="/static/a-wenjianjiawenjian.png" mode="widthFix"></image></view><view class="title-box"style="display: flex;justify-content: space-between;width: 100%;align-items: center;"><view class="">{{local==='zh-Hans'?item.filename:item.filename_EN}}</view><view class="">{{item.DownloadTime}}</view></view></view></view></uni-list></view></template><template><!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标; 申明在 MescrollMoreItemMixin )--><view v-show="i === index"><mescroll-uni :ref="'mescrollRef'+i" top="92" @init="mescrollInit" @down="downCallback" @up="upCallback":down="downOption" :up="upOption"><!-- 数据列表 --> <!-- tab为0的时候 --><Tree v-if="index===0" :list="list" :local='local'></Tree> <!-- tab为1的时候 --><DownTree v-else :records="records" :local='local'></DownTree></mescroll-uni></view></template><script>import DownTree from '@/components/DownTree/index.vue'import Tree from '@/components/Tree/index.vue'import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";export default {mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)components: {Tree,DownTree},props: {i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)type: Number,default () {return 0}},tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传type: Array,default () {return []}}},data() {return {list: [], //下载列表local: '',records: [], //下载列表downOption: {auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)},upOption: { use: false, // 是否启用上拉加载; 默认true auto: false }}},created() {this.local = uni.getLocale()},methods: {/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */downCallback() {this.mescroll.resetUpScroll()},upCallback(page) {if (this.index === 0) {let pageNum = page.numthis.api.GetFileTreeJson().then(res => {// console.log(res.data.Data)this.list = res.data.Datathis.mescroll.endByPage(this.list.length, 1);//设置列表数据if (page.num == 1) this.list = []; //如果是第一页需手动制空列表this.list = this.list.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})} else {this.api.GetWxUserDownloadList().then(res => {// console.log(res.data.Data)this.records = res.data.Datathis.mescroll.endByPage(this.records.length, 1);//设置列表数据if (page.num == 1) this.records = []; //如果是第一页需手动制空列表this.records = this.records.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})}},// 文件列表GetFileTreeJson() {this.api.GetFileTreeJson().then(res => {// console.log(res.data.Data)this.list = res.data.Datathis.mescroll.endByPage(this.list.length, 1);//设置列表数据if (page.num == 1) this.list = []; //如果是第一页需手动制空列表this.list = this.list.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},getrecords() {this.api.GetWxUserDownloadList().then(res => {// console.log(res.data.Data)this.records = res.data.Datathis.mescroll.endByPage(this.records.length, 1);//设置列表数据if (page.num == 1) this.records = []; //如果是第一页需手动制空列表this.records = this.records.concat(res.data.Data); //追加新数据}).catch(() => {//联网失败, 结束加载this.mescroll.endErr();})},}}</script>

第二步：页面使用pages/word/components/index.vue

<template><view class="word-container"><view class="example-body"><view v-for="(item,index) in tags" :key="index":class="tabIndex===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"@click="tabChange(index)" @input="changeload" v-model="tabIndex">{{item}}</view></view><mescrollItem0 ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tags"></mescrollItem0><mescrollItem0 ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tags"></mescrollItem0></view></template><script>import mescrollItem0 from "./components/all.vue";import mescrollItem1 from "./components/downitem.vue";// import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";export default {mixins: [MescrollMixin],name: 'Word',components: {mescrollItem0,mescrollItem1,},data() {return {tags: [],list: [],records: [], //下载列表local: '',tabIndex: 0,//标签对应页面};},onLoad() {this.tags.push(this.$t('word.whole'), this.$t('word.download'))uni.setNavigationBarTitle({title: this.$t('pages.word'),})},onShow() {this.whichSelected = this.$store.state.tabsthis.tabIndex = this.$store.state.tabsthis.local = uni.getLocale()if (this.whichSelected === 1) {const Token = uni.getStorageSync('GetPhone_Token')if (Token) {this.$refs.mescrollItem1.getrecords()} else {uni.navigateTo({url: '/pages/login/index'});}} },methods: {// 标签切换tabChange(index) {this.whichSelected = indexthis.tabIndex = indexthis.$store.commit('SET_TABS', index)if (this.tabIndex === 1) {const Token = uni.getStorageSync('GetPhone_Token')if (Token) {this.$refs.mescrollItem1.getrecords()} else {uni.navigateTo({url: '/pages/login/index'});}} },}}</script><style lang="scss">.vue-ref {padding: 0 !important;}.word {&container {position: relative;}}.left {display: flex;margin: 10px;}.example-body {display: flex;padding: 10px 20px;background-color: #fff;width: 100%;position: fixed;z-index: 2;}.center {position: absolute;top: 45px;width: 100%;// height: 100%;border-top: 1px solid #e5e5e5;}.stateBtnSelected {background-color: #bbe5ff;color: #1480cd !important;border-radius: 20px;font-size: 14px;height: 25px;line-height: 25px;// width: 60px;margin: 0 5px;padding: 0 15px;text-align: center;}.stateBtnNoselect {background-color: transparent;color: #8f939c !important;border: none !important;font-size: 14px;height: 25px;line-height: 25px;// width: 60px;margin: 0 5px;padding: 0 15px;text-align: center;}.slot-image {width: 30px;height: 30px;}.slot-box {margin-right: 10px;}.uni-list-item__container {align-items: center !important;line-height: 20px;}</style>