dcloud------mui 点击底部选项卡,获取文本内容
1.点击选项卡,触发的事件,我们用mui('.mui-bar-tab').on('tap', 'a', function(e) { });
2.点击之后,采用 this 关键词,获取该对象,例如以下情况:
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" >
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="message">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" id="phonenumber">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#" id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
this 就表示分别点击到:首页、消息、通讯录、设置这几个tab的a标签内的所有元素,要拿到文本的话,还要用到一个方法 querySelector,获取文本内容:this.querySelector('.mui-tab-label').innerHTML;
如果tab直接由a标签构成,例如以下情况:
<nav class="mui-bar mui-bar-tab ">
<a class="mui-tab-item" href="#Popover_0">产品</a>
<a class="mui-tab-item" href="#Popover_1">方案</a>
<a class="mui-tab-item" href="#Popover_2">新闻</a>
</nav>
则文本内容获取方式:this.innerHTML;
ps:如果此时想要达到的目的是点击tab,修改header 的值,且nav和header是由两个页面构成,可以尝试一下方法
subpages(子) 页面
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var ttile=this.querySelector('.mui-tab-label').innerHTML;
mui.fire(plus.webview.currentWebview().parent(), 'customevent',{ttext: ttile});
});
index(主) 页面
window.addEventListener('customevent',function(event){
document.getElementById("title").innerHTML=event.detail.ttext;
});
到此:ok,就搞定了!如果有不明白的,关注并留言,一起探讨下!
如果大家感兴趣,或者想一起探讨学习的,请加一下这个QQ群, 488505459,谢谢!