目录

一 
  
  
  
  
  、全局

二 
  
  
  
  
  
 、局部

1

 


 


 


 


 


、一个页面一个下拉刷新

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

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

一
 

 

 

 

 

、全局

修改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 = this this.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 = this this.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 = this this.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 = this this.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.num this.api.GetFileTreeJson().then(res => { // console.log(res.data.Data) this.list = res.data.Data this.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.num this.api.GetWxUserDownloadList().then(res => { this.records = res.data.Data this.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.Data this.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.tabs this.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 = index this.tabIndex = index this.$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.num this.api.GetFileTreeJson().then(res => { // console.log(res.data.Data) this.list = res.data.Data this.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.Data this.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.Data this.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.Data this.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.tabs this.tabIndex = this.$store.state.tabs this.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 = index this.tabIndex = index this.$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>