本文轉(zhuǎn)自微信公眾號："算法與編程之美"

1、前言

側(cè)滑是一個非常實(shí)用的選項組件，它在Android App應(yīng)用中非常廣泛，常見的場景有：下拉刷新，側(cè)滑抽屜，側(cè)滑刪除，側(cè)滑返回以及側(cè)滑菜單等。就是因為側(cè)滑應(yīng)用太過于廣泛，它所帶來的問題也是應(yīng)接不暇。

2、問題描述

在實(shí)際操作過程中，實(shí)現(xiàn)側(cè)滑菜單帶來了那么一個問題，側(cè)滑菜單已經(jīng)實(shí)現(xiàn)，但是側(cè)滑導(dǎo)航的子選項卡里的內(nèi)容要如何實(shí)現(xiàn)跳轉(zhuǎn)，通常想到的辦法便是建立<a>標(biāo)簽選項卡進(jìn)行herf的添加進(jìn)行跳轉(zhuǎn)，在一般情況下，我們當(dāng)然可以利用a標(biāo)簽herf的跳轉(zhuǎn)，但是那是大多數(shù)情況，在實(shí)際操作中，這種情況還經(jīng)常發(fā)生，并且很少有解決的方法，所以小編在此便是通過這篇文章進(jìn)行幫助解決。

3、解決方案

我們知道MUI提供兩種側(cè)滑導(dǎo)航實(shí)現(xiàn)：div模式和webview模式

Webview模式是根據(jù)單獨(dú)的菜單框架填寫內(nèi)容，它所構(gòu)成的菜單是一個獨(dú)立菜單區(qū)域并且webview模式下的菜單區(qū)域不會影響主菜單的內(nèi)容，滑動的實(shí)用性非常高

div模式則是根據(jù)主頁面來創(chuàng)建的一個菜單區(qū)域，它和主頁面都同時處于一個webview中，所以它是可以拖動手勢進(jìn)行切換到菜單區(qū)域，并且可以通過JS輕松實(shí)現(xiàn)交互。

那么本篇文章便是針對div模式下的側(cè)滑菜單進(jìn)行解決，創(chuàng)建一個側(cè)滑導(dǎo)航區(qū)域。

我們上面提到div模式下側(cè)滑菜單可以通過JS實(shí)現(xiàn)交互，那么這里的側(cè)滑導(dǎo)航內(nèi)容便可以利用JS解決<a>標(biāo)簽無法通過herf實(shí)現(xiàn)跳轉(zhuǎn)。（同時在網(wǎng)上查找到另一種方法也可實(shí)現(xiàn).）

具體代碼如下：

方法一：

mui('body').on('tap','a',function(){
 window.top.location.href=this.href;
 });

方法二：

mui('#menu').on('tap','li  a',function(){ 

    // 獲取地址   

    var href =  this.getAttribute('href');   

     mui.openWindow({ 

        id:  'new', 

        url:  href 

    }) 

})

4、結(jié)語

在一般瀏覽器運(yùn)行時，MUI判斷到?jīng)]有plus環(huán)境，herf可以用做跳轉(zhuǎn)，但是在實(shí)際的Android App運(yùn)行中，就不能，所以可以通過以上的JS實(shí)現(xiàn)，

同時需要注意：JS代碼放在boby內(nèi)容的下方才能實(shí)現(xiàn)。

到此這篇關(guān)于基于Python實(shí)現(xiàn)MUI側(cè)滑菜單a標(biāo)簽跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)MUI側(cè)滑菜單a標(biāo)簽跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論