hbuild mui 开发的webapp 怎么实现切换选项卡，然后执行一次下拉刷新更新数据，求各位大神指教

方法/步骤今天，写一个webapp，发现mui的底部导航选项卡只能实现div切换，我加链接没反应百度了一下，说的是mui用作手机web页面，在下拉刷新+tab滚动切换下，a标签的设置href，点击不会进行跳转心塞，总要想法解决吧boss才不会管你说什么呢干货//解决导航a标签不能跳转页面mui('body').on('tap','a',function(){document.location.href=this.href})

一资料参考

二实现步骤

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)

       }

   })

}

---