Question

为什么mui下拉刷新会执行了两次接口

下拉之后调了两次接口

Answer 1

• 一资料参考

• 二实现步骤

• HTML内容

• 通过muiinit方法中pullRefresh参数配置各项参数

• 下拉刷新具体业务实现

• 上拉加载具体业务实现

• 自动下拉刷新

• 到接口取数据

一、资料参考

• 官方文档：http://dev.dcloud.net.cn/mui/pulldown/

二、实现步骤

1.HTML内容

（最好按照这个结构来布置，当然 id的位置可以稍微根据实际需要来调整）

• <!--下拉刷新容器--><div id="pullrefresh" class="mui-content mui-scroll-wrapper">


•  <div class="mui-scroll">


•    <!--数据列表-->


•    <ul class="mui-table-view mui-table-view-chevron">


•    </ul>


•  </div></div>12345678



2.通过mui.init方法中pullRefresh参数配置各项参数

• mui.init({


•    pullRefresh: {


•        container: '#pullrefresh',


•        down: {//下拉刷新


•            auto:true,//可选,默认false.自动下拉刷新一次


•            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容


•            contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容


•            contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容


•            callback: pulldownRefresh


•        },


•        up: {//上拉加载


•            //auto:true,//可选,默认false.自动上拉加载一次


•            contentrefresh: '正在加载...',


•            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；


•            callback: pullupRefresh


•        }


•    }


• });123456789101112131415161718



3.下拉刷新具体业务实现

• function pulldownRefresh() {


•    setTimeout(function() {


•        count = 1;//刷新并显示第一页


•        data={            //...,


•            page:count


•        };


•        type=1;//代表下拉刷新


•        toList(data,type);//具体取数据的方法


•    }, 100);


• }1234567891011



4.上拉加载具体业务实现

• function pullupRefresh() {


•    setTimeout(function() {


•        count++;//翻下一页


•        data={            //...,


•            page:count


•        };


•        type=2;//代表上拉加载


•        toList(data,type);//具体取数据的方法


•    }, 100);


• }1234567891011



5.自动下拉刷新

此处只提供一种方法，因为在init参数配置中，auto:true,也能实现同样的效果，目前还不知道两者的区别。

• if(mui.os.plus) {


•    mui.plusReady(function() {


•        setTimeout(function() {


•            mui('#pullrefresh').pullRefresh().pulldownLoading();


•        }, 1000);


•    });


• } else {


•    mui.ready(function() {


•        mui('#pullrefresh').pullRefresh().pulldownLoading();


•    });


• }1234567891011



6.到接口取数据

此处提供的是ajax方法。同时处理”上拉显示更多”以及“没有更多数据”的翻页切换。

• var vm = new Vue({//此处采用vue.js


•    el: '#pullrefresh',


•    data: {


•        companylist: null,


•    },


•    created: function() {


•    },


•    methods: {


•    }


• });var toLsit = function(data,type) {


•    plus.nativeUI.showWaiting("等待中....",{padlock: true});//数据出来前显示等待加载框


•    mui.ajax(url, {


•        data:data,


•        dataType: 'json',


•        type: 'POST',


•        timeout: 10000,


•        success: function(data) {


•            for (var i in data.company_list) {                 var arr = new Array();                 for (var item in data.company_list[i]) {


•                     arr[item] = data.company_list[i][item];


•                 }                 if(type==1){//上拉刷新


•                      /*下面这句很关键！*/


•                      mui('#pullrefresh').pullRefresh().refresh(true);//有重新触发上拉加载的需求（比如当前类别已无更多数据，但切换到另外一个类别后，应支持继续上拉加载）


•                      vm.companylist = data.company_list;


•                      plus.nativeUI.closeWaiting();//数据渲染完毕，关闭加载框


•                      mui.currentWebview.show(); //显示当前页面          


•                 }                  if(type==2){//下拉加载


•                      vm.companylist.push(arr);


•                      plus.nativeUI.closeWaiting();//数据渲染完毕，关闭加载框


•                      mui.currentWebview.show(); //显示当前页面


•                 }


•             }



•             mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//结束下拉刷新


•             /*结束上拉加载，并根据情况切换“下拉显示更多数据”，以及“没有更多数据了”。执行endPullupToRefresh()方法，结束转雪花进度条的“正在加载...”过程,若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时*/


•             if(data.status == 1){


•                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);


•             } else {


•                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);


•             }


•            plus.nativeUI.closeWaiting();


•            mui.currentWebview.show(); //显示当前页面


•            if(data.status!=1&&count==1){


•                alert(data.errormessage);


•                plus.nativeUI.closeWaiting();


•                mui.currentWebview.show(); //显示当前页面


•            }


•        },


•        error: function(xhr, type, errerThrown) {


•            mui.toast('网络异常,请稍候再试');


•            plus.nativeUI.closeWaiting();  


•            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);


•        }


•    });


• };