1.1獲取input值單個

js:

var input_ = document.getElementById('inputid');

var input_mui = mui('#inputid');

console.log(input_.value);//aaa

console.log(input_mui.value);//undefind

console.log(input_mui[0].value);//aaa

mui元素藥轉成DOM元素才能用。。什么鬼！

用mui元素+“[0]”來轉

1.2獲取input值列表

click me

js:

function fn_(){

mui('#formid input').each(function(k,v){

console.log(v.value);//ok的，該什么是什么

});

}

1.3點擊問題(tap)

【此處注意一下，像帶mui，addEventListener("tap"很像mui標簽的代碼的時候，都寫在mui.init()這句話的后面！！！skr！skr！】

列表是可以用的

test

js:

var vm = new Vue({

el:'#vuelist',

data:{itemlist:[1,2,3]}

});

function fn_(){ //todo }

但是單個的就不行

//錯誤，用tap這個fn_()是無效的

click me

//簡單的mbody元素中正確。但是這個盡量不要用，場景不同它不一定都生效

click me

1.4點擊問題(單個元素)

//錯誤

mui('#addlisten').on("tap",function () {

console.log('mmm');

appendCon.appendChild(children);

});

//正確,有效的

var btn = document.getElementById("addlisten");

//監聽點擊事件

btn.addEventListener("tap",function () {

console.log("tap event trigger");

});

//錯誤

mui("addlisten").addEventListener("tap",function () {

console.log("tap event trigger");

});

//正確,有效的

mui('#addlistenCon').on("tap","#addlisten",function () {

console.log("tap event trigger");

});

1.5mui元素動態添加

mui('#addlistenCon').on("tap","#addlisten",function () {

var div_ = document.createElement('div');//這個div你如果定義在外面的話，就只能用一次

div_.innerHTML = 'get!!';

document.getElementById('lazyCon').appendChild(div_);

});

1.6事件代理

div是#lazyCon中動態生成的元素

//正確

mui('#lazyCon').on("tap","div",function () {

});

//正確

mui('#lazyCon').on("click","div",function () {

});

嗯，動態生產的a標簽也是可以點擊跳轉的哈

1.7vue和mui結合的數據加載

這么寫哈！！！一天整那些亂七八糟的！！

mui.init();

var vm = new Vue({

el: '.mui-content',

data: {

content:'ori'

},

mounted: function (){

this.content = 'jack'

mui.ajax('../datatest/test.json', {

type:'GET',

dataType: 'json', //服務器返回json格式數據

success: function(res) {

vm.content = 'Jack1...'

console.log(this.content);

},

error: function(xhr, type, errorThrown) {

mui.toast('獲取文章內容失敗');

//TODO 此處可以向服務端告警

}

});

},

methods:{

}

});

1.8詢問框

mui.confirm('確定要刪除該訂單嗎？','',['取消','確定'],function(e){

if(e.index == 1){

mui.toast('shanchu ');

}else{

mui.toast('nonono ');

}

});

1.9跳轉

mui('body').on('tap','a',function(){

window.top.location.href=this.href;

});

2.0復制粘貼功能實現

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

var vbillno = document.getElementById('vbillno').innerText;

switch(plus.os.name){

case 'iOS':

//獲取剪切板

var UIPasteboard = plus.ios.importClass("UIPasteboard");

var generalPasteboard = UIPasteboard.generalPasteboard();

// 設置/獲取文本內容

generalPasteboard.setValueforPasteboardType(vbillno, "public.utf8-plain-text");

var value = generalPasteboard.valueForPasteboardType("public.utf8-plain-text");

break;

case 'Android':

var Context = plus.android.importClass("android.content.Context");

var main = plus.android.runtimeMainActivity();

var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);

plus.android.invoke(clip,"setText",vbillno);

break;

}

mui.toast("訂單號已復制成功");

});

2.1返回上一頁并刷新

這個很常用，一個list表單，點其中一個跳到編輯頁面，提交返回并刷新

//返回上一頁

mui.oldback = mui.back;

function goback(){

plus.webview.currentWebview().opener().reload();

mui.oldback();

}

//但有時我們會a-b-c

希望直接返回上上一頁,從c返回a

a-b時用formpage_id = plus.webview.currentWebview().opener().id獲取a的頁面id，

為什么不直接傳值呢？因為真實的項目情況是如果b頁面變得經常被復用，那么你是否要給a1，a2，a3....頁面都去加一個專屬id？很麻煩不好維護

b-c時將該值formpage_id 傳給c

plus.webview.getWebviewById(formpage_id).reload();

唉~~~(>_

image.png

總結

以上是生活随笔為你收集整理的hbuild json红叉_MUI+Hbuilder之踩坑（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。