首页 > 建站教程 > APP开发,混合APP >  uni-app上拉加载和下拉刷新代码正文

uni-app上拉加载和下拉刷新代码

1、pages.json配置需要上拉加载和下拉刷新的enablePullDownRefresh为true
01{
02 "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
03 {
04 "path": "pages/index/index",
05 "style": {
06 "navigationBarBackgroundColor": "#FFFFFF",
07 "navigationBarTitleText": "E健康",
08 "navigationBarTextStyle": "black",
09 "enablePullDownRefresh": true,   //允许上拉加载和下拉刷新为true
10 "navigationStyle":"custom",
11 "titleNView":false
12 }
13 },
14 ]
15}
2、下拉刷新代码,与created、methods等同级
1//刷新
2onPullDownRefresh:function() {
3 this.getList();
4 setTimeout(function () {
5 uni.stopPullDownRefresh();
6 }, 1000);
7},
8stopPullDownRefresh:function(){
9},
3、上拉加载
01//data配置变量
02data(){
03 return {
04 page:1,
05 limit:20,
06 totalPage:'',//总页数
07 totalCount:'',//列表总数
08 lists:[],  //列表数据
09 }
10},
11//methods获取数据示例
12methods:{
13 getList(){
14 var that=this;
15 this.$func.api(this.$apiConfig.IntegralProductPage(),{
16 'page':that.page,
17 'limit':that.limit,
18 },
19 function(res){
20 if(res.data.status==200){
21 // 根据总条数计算总页数
22 that.totalCount = res.data.data.total;
23 // 如果总数除以limit 余数为0 说明没有下一页了
24 if (res.data.data.total % that.limit === 0) {
25     that.totalPage = parseInt(res.data.data.total / that.limit);
26 } else {
27     that.totalPage = parseInt((res.data.data.total / that.limit)) + 1;
28 }
29 var resultList=res.data.data.rows;
30 if (that.page == 1) {
31     that.lists = resultList;
32 } else {
33     that.lists = that.lists.concat(resultList);
34 }
35 }
36 },function(err){})
37 },
38},
39//上拉加载
40onReachBottom(){
41 if (this.page >= this.totalPage) {
42        func.msg("没有更多内容了");
43        return
44    }
45    // 加载更多数据
46    this.page++;
47    this.getList();
48},