MUI移動端頁面跳轉

時間 2019-11-09

標籤 mui 移動頁面欄目無線简体版

原文原文鏈接

  今天整理MUI移動端頁面跳轉的幾種方法和遇到的不一樣的坑 

  先上設置button、label和a標籤的代碼： 

  <body> 

  <button type="button" class="mui-btn" 
 onclick="jumpToDetailView()"id="jumpToDetail">查看企業詳情</button> 

  <div class="div"> 

  <label class="test" id="test">this is a test label</label> 

  <a class="atest" id="at">this is a test</a> 

  </div> 

  </body> 

 
 跳轉方法一：button類型使用onclick='',函數跳轉 

 
 function jumpToDetailView(){ 

 
 alert('123'); 

  mui.openWindow({ 

  url:'details/detail.html', 

  id:'detail.html' 

});

}

  這種方法貌似只對button有效，在驗證函數時，alert驗證有效且不影響函數 

 
 跳轉方法二：添加監聽事件跳轉 

 
 document.getElementById('at').addEventListener('tap',function(){ 

  //alert('test a'); 

  mui.openWindow({ 

  url:'details/detail.html', 

  id:'detail.html' 

});

});

  添加監聽事件對全部跳轉都有效，可是在驗證的過程當中，使用了alert之後發現彈出框不顯示且跳轉不起做用，不知道具體什麼緣由，等之後找到緣由再補充。 

 
 跳轉方法三：使用.on形式跳轉 

  基於官網（ 
 http://dev.dcloud.net.cn/mui/event/#on）上的描述「除了能夠使用addEventListener()方法監聽某個特定元素上的事件外， 也能夠使用.on()方法實現批量元素的事件綁定」。 

  參考樣例： 

  mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){ //獲取id var id = this.getAttribute("id"); //傳值給詳情頁面，通知加載新數據 mui.fire(detail,'getDetail',{id:id}); //打開新聞詳情 mui.openWindow({ id:'detail', url:'detail.html' });}) 

  如下是本寶寶的一些失敗的例子，但願好心人士看到能指出問題所在。不過我也不會放棄的，若是找到了正確方法我會及時更新的。在這裏先自我反省一下。 

  //label使用.on形式跳轉 

  // mui('.test').on('tap',function(e){ 

  // //alert('test label'); 

  // mui.openWindow({ 

  // url:'details/detail.html', 

  // id:'detail.html' 

  // }); 

  // }); 

  // mui('#test').on('tap',function(e){ 

  // //alert('test label'); 

  // mui.openWindow({ 

  // url:'details/detail.html', 

  // id:'detail.html' 

  // }); 

  // }); 

  //a標籤使用.on形式跳轉 

  // mui('.atest').on('tap','a',function(e){ 

  // //alert('test a'); 

  // mui.openWindow({ 

  // url:'details/detail.html', 

  // id:'detail.html' 

  // }); 

  // }); 

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。