基于Python实现MUI侧滑菜单a标签跳转

 更新时间:2021年11月18日 10:12:42   作者:衡辉  
这篇文章主要介绍了基于Python实现MUI侧滑菜单a标签跳转,mui最接近原生APP体验的高性能前端框架,MUI侧滑常见的场景有下拉刷新,侧滑抽屉,侧滑删除,侧滑返回以及侧滑菜单等等,下面来看看文章内容详细的介绍,需要的朋友可以参考一下

本文转自微信公众号:"算法与编程之美"

1、前言

侧滑是一个非常实用的选项组件,它在Android App应用中非常广泛,常见的场景有:下拉刷新,侧滑抽屉,侧滑删除,侧滑返回以及侧滑菜单等。就是因为侧滑应用太过于广泛,它所带来的问题也是应接不暇。

2、问题描述

在实际操作过程中,实现侧滑菜单带来了那么一个问题,侧滑菜单已经实现,但是侧滑导航的子选项卡里的内容要如何实现跳转,通常想到的办法便是建立<a>标签选项卡进行herf的添加进行跳转,在一般情况下,我们当然可以利用a标签herf的跳转,但是那是大多数情况,在实际操作中,这种情况还经常发生,并且很少有解决的方法,所以小编在此便是通过这篇文章进行帮助解决。

3、解决方案

我们知道MUI提供两种侧滑导航实现:div模式和webview模式

Webview模式是根据单独的菜单框架填写内容,它所构成的菜单是一个独立菜单区域并且webview模式下的菜单区域不会影响主菜单的内容,滑动的实用性非常高

div模式则是根据主页面来创建的一个菜单区域,它和主页面都同时处于一个webview中,所以它是可以拖动手势进行切换到菜单区域,并且可以通过JS轻松实现交互。

那么本篇文章便是针对div模式下的侧滑菜单进行解决,创建一个侧滑导航区域。

我们上面提到div模式下侧滑菜单可以通过JS实现交互,那么这里的侧滑导航内容便可以利用JS解决<a>标签无法通过herf实现跳转。(同时在网上查找到另一种方法也可实现.)

具体代码如下:

方法一:

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、结语

在一般浏览器运行时,MUI判断到没有plus环境,herf可以用做跳转,但是在实际的Android App运行中,就不能,所以可以通过以上的JS实现,

同时需要注意:JS代码放在boby内容的下方才能实现。

到此这篇关于基于Python实现MUI侧滑菜单a标签跳转的文章就介绍到这了,更多相关MUI侧滑菜单a标签跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详细解读python操作json文件的详细

    详细解读python操作json文件的详细

    这篇文章主要为大家介绍了python操作json文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Pygame实战练习之保护单身狗游戏

    Pygame实战练习之保护单身狗游戏

    下面这篇文章主要给大家介绍了关于如何利用python写一个简单的由经典躲避类益智小游戏修改的保护单身狗游戏的相关资料,需要的朋友可以参考下
    2021-09-09
  • python实现AES加密与解密

    python实现AES加密与解密

    这篇文章主要为大家详细介绍了python实现AES加密与解密,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 如何对csv文件数据分组,并用pyecharts展示

    如何对csv文件数据分组,并用pyecharts展示

    这篇文章主要介绍了如何对csv文件数据分组,并用pyecharts展示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • python下如何查询CS反恐精英的服务器信息

    python下如何查询CS反恐精英的服务器信息

    这篇文章主要介绍了python下如何查询CS反恐精英服务器信息的方法,分别分享了反恐精英1.5版本和反恐精英1.6版本的实现方法示例,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2017-01-01
  • python面试题之列表声明实例分析

    python面试题之列表声明实例分析

    这篇文章主要介绍了python面试题之列表声明,结合实例形式分析了Python列表的声明、计算相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • Python 中的with关键字使用详解

    Python 中的with关键字使用详解

    这篇文章主要介绍了Python 中的with关键字使用详解的相关资料,在Python中,with关键字是一个替你管理实现上下文协议对象的好东西,需要的朋友可以参考下
    2016-09-09
  • Python如何把字典写入到CSV文件的方法示例

    Python如何把字典写入到CSV文件的方法示例

    这篇文章主要介绍了Python如何把字典写入到CSV文件的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Python2与Python3的区别详解

    Python2与Python3的区别详解

    这篇文章主要介绍了Python2与Python3的区别详解,需要的朋友可以参考下
    2020-02-02
  • python serial串口通信示例详解

    python serial串口通信示例详解

    Python的serial库是一个用于串口通信的强大工具,它提供了一个简单而灵活的接口,可以方便地与串口设备进行通信,包括与驱动电机进行通信,这篇文章主要介绍了python serial串口通信,需要的朋友可以参考下
    2023-12-12

最新评论