• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > 混合APP开发 >  uni-app上拉加载和下拉正文

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

作者:网页模板
类型:文章教程
点击次数:
发布时间:2019-09-11 13:59
分享到:
1、pages.json配置需要上拉加载和下拉刷新的enablePullDownRefresh为true
{
 "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
 {
 "path": "pages/index/index",
 "style": {
 "navigationBarBackgroundColor": "#FFFFFF",
 "navigationBarTitleText": "E健康",
 "navigationBarTextStyle": "black",
 "enablePullDownRefresh": true,   //允许上拉加载和下拉刷新为true
 "navigationStyle":"custom",
 "titleNView":false
 }
 },
 ]
}
2、下拉刷新代码,与created、methods等同级
//刷新
onPullDownRefresh:function() {
 this.getList();
 setTimeout(function () {
 uni.stopPullDownRefresh();
 }, 1000);
},
stopPullDownRefresh:function(){
},
3、上拉加载
//data配置变量
data(){
 return {
 page:1,
 limit:20,
 totalPage:'',//总页数
 totalCount:'',//列表总数
 lists:[],  //列表数据
 }
},
//methods获取数据示例
methods:{
 getList(){
 var that=this;
 this.$func.api(this.$apiConfig.IntegralProductPage(),{
 'page':that.page,
 'limit':that.limit,
 },
 function(res){
 if(res.data.status==200){
 // 根据总条数计算总页数
 that.totalCount = res.data.data.total;
 // 如果总数除以limit 余数为0 说明没有下一页了
 if (res.data.data.total % that.limit === 0) {
     that.totalPage = parseInt(res.data.data.total / that.limit);
 } else {
     that.totalPage = parseInt((res.data.data.total / that.limit)) + 1;
 }
 var resultList=res.data.data.rows;
 if (that.page == 1) {
     that.lists = resultList;
 } else {
     that.lists = that.lists.concat(resultList);
 }
 }
 },function(err){})
 },
},
//上拉加载
onReachBottom(){
 if (this.page >= this.totalPage) {
        func.msg("没有更多内容了");
        return
    }
    // 加载更多数据
    this.page++;
    this.getList();
},
(责任编辑:网页模板)
  • 本文标签:
  • uni-app
APICloud 动态权限完整示范代码
VSCode链接mumu模拟器和夜神模拟器