快捷導(dǎo)航

基于Python實(shí)現(xiàn)MUI側(cè)滑菜單a標(biāo)簽跳轉(zhuǎn)

更新時(shí)間：2021年11月18日 10:12:42 作者：衡輝

這篇文章主要介紹了基于Python實(shí)現(xiàn)MUI側(cè)滑菜單a標(biāo)簽跳轉(zhuǎn)，mui最接近原生APP體驗(yàn)的高性能前端框架，MUI側(cè)滑常見的場(chǎng)景有下拉刷新,側(cè)滑抽屜,側(cè)滑刪除,側(cè)滑返回以及側(cè)滑菜單等等，下面來看看文章內(nèi)容詳細(xì)的介紹,需要的朋友可以參考一下

1、前言

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

2、問題描述

在實(shí)際操作過程中，實(shí)現(xiàn)側(cè)滑菜單帶來了那么一個(gè)問題，側(cè)滑菜單已經(jīng)實(shí)現(xiàn)，但是側(cè)滑導(dǎo)航的子選項(xiàng)卡里的內(nèi)容要如何實(shí)現(xiàn)跳轉(zhuǎn)，通常想到的辦法便是建立<a>標(biāo)簽選項(xiàng)卡進(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)成的菜單是一個(gè)獨(dú)立菜單區(qū)域并且webview模式下的菜單區(qū)域不會(huì)影響主菜單的內(nèi)容，滑動(dòng)的實(shí)用性非常高

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

那么本篇文章便是針對(duì)div模式下的側(cè)滑菜單進(jìn)行解決，創(chuàng)建一個(gè)側(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)。（同時(shí)在網(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)行時(shí)，MUI判斷到?jīng)]有plus環(huán)境，herf可以用做跳轉(zhuǎn)，但是在實(shí)際的Android App運(yùn)行中，就不能，所以可以通過以上的JS實(shí)現(xiàn)，

同時(shí)需要注意：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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: