uniapp开发微信小程序之下拉刷新数据，上拉触底加载更多（附demo）

利用原生方法实现下拉刷新数据，上拉触底加载更多。

惯例先看效果

前端demo工程：https://ext.dcloud.net.cn/plugin?id=20691

实现思路：

1）利用原生onReachBottom、onPullDownRefresh方法，调用更新数据loadData、加载更多loadMore

2）loadData展示后台数据集，loadMore合并后台数据集

3）若后台无新数据，给出提示

参数配置：

在pages.json对应页面配置"enablePullDownRefresh": true；无此配置则无法触发下拉刷新数据。

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages    {      "path": "pages/index/refreshdata",      "style": {        "navigationBarTitleText": "uni-app",        "enablePullDownRefresh": true      }    }  ]

前端代码：

refreshdata.vue：实现下拉刷新数据，上拉触底加载更多

  <view class="container">    <view v-for="(item,index) in items" :key="id">      <view class="item">        <view class="title">{{item.title}}</view>        <view class="time">{{item.time}}</view>        <view class="content">{{item.content}}</view>      </view>    </view>    <view class="nomore" v-if="nomore">      <text>别拽了，我是有底线的！</text>    </view>  </view>

    //触底加载更多    onReachBottom() {      if(!this.nomore){        this.loadMore(); // 调用加载更多方法      }    },    //下来刷新数据    onPullDownRefresh() {      this.nomore = false ;      this.loadData(); // 调用刷新数据方法    }

      //加载数据      loadData(){        this.items =[];        //模拟后端返回数据，实际项目获取后台返回最新数据        for(let i=0;i<10;i++){          this.items.push({title:'这是标题'+this.items.length,time:new Date().getTime(),content:'这里是内容'+this.items.length                  +'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'});        }        //结束下拉刷新        uni.stopPullDownRefresh();      },      //加载更多      loadMore(){        //判断是否还有数据  正式的一般用pageSize*pageNo<total        if(this.items.length>20){          this.nomore = true;          return ;        }        //模拟后台数据        for(let i=0;i<10;i++){          this.items.push({title:'这是标题'+this.items.length,time:new Date().getTime(),content:'这里是内容'+this.items.length                  +'这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容'});        }      }

说明：demo为模拟后端数据，实际项目中改为请求后端

最后介绍下我开发了两款微信小程序：趣味知识宝典、萌娃成长，大家可以免费使用，多多支持下！

趣味知识宝典：一款知识学习工具，在趣味中学习知识，包括成语（包含成语拼音、释义、出处、语法、例句、近义词、反义词、故事（寓言故事、历史典故）等，按照寓言、高考（近10年）、时间等多维度分类），科普知识（十万为什么），谜语（猜字谜、脑筋急转弯）等。

萌娃成长：育儿好帮手，奶瓶喂养、母乳亲喂、辅食喂养、补剂用药、换尿不湿、睡眠记录、身高体重、疫苗接种、发育评估（DQ）统统搞定，记录宝宝成长每个瞬间，与宝妈奶爸一起交流育儿经验，与萌娃一起健康快乐成长。