目录
一、全局
二、局部
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
我的需求是顶部内容固定不动,列表下拉刷新(没有页码,数据一次性展示)
页面使用
{{item}}
多页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中才行
pages/word/components/downitem.vue和上一个组件一致,只不过数据组件不一致,多了一个获取列表的方法给父组件使用
第三步:在页面中使用pages/word/components/index.vue
{{item}}
如果tabs对应内容分别封装成各自组件,子组件封装的时候使用mescroll-uni,并且使用v-show会出现当列表数据多页时切换tabs,恢复滚动条位置不准确并且会触发上拉这样的问题。但是如果我把他放在一个组件里就不会产生这样的问题
第一步:组件pages/word/components/all.vue
Tree和DownTree组件使用的是uni-list的自定义插槽,不知道为啥我使用uni-list-item就会触发一次上拉,之后就不会了,但是不使用就不会触发
{{local==='zh-Hans'?item.filename:item.filename_EN}} {{item.DownloadTime}}
第二步:页面使用pages/word/components/index.vue
{{item}}
到这里就结束啦,这篇文章看完如果您觉得有所收获,认为还行的话,就点个赞收藏一下