基于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 高级库15 个让新手爱不释手(推荐)

    Python 高级库15 个让新手爱不释手(推荐)

    对于初学者来说,这是一种简单易学的编程语言;另一个原因:大量开箱即用的第三方库,正是 23 万个由用户提供的软件包使得 Python 真正强大和流行,本文给大家分享15 个让新手爱不释手Python 高级库的相关知识,感兴趣的朋友一起看看吧
    2021-05-05
  • 只需7行Python代码玩转微信自动聊天

    只需7行Python代码玩转微信自动聊天

    今天小编就为大家分享一篇关于只需7行Python代码玩转微信自动聊天,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • python中执行smtplib失败的处理方法

    python中执行smtplib失败的处理方法

    在本篇文章里小编给大家整理了关于python中执行smtplib失败的处理方法,对此有需要的朋友们可以学习下。
    2020-07-07
  • 对Django 中request.get和request.post的区别详解

    对Django 中request.get和request.post的区别详解

    今天小编就为大家分享一篇对Django 中request.get和request.post的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-08-08
  • Python将多个图像合并输出的实现方法

    Python将多个图像合并输出的实现方法

    这篇文章主要介绍了Python将多个图像合并输出的实现方法,本文介绍了两种将多个图像合并为一个输出的方法:使用PIL库或使用OpenCV和NumPy,这些库都可以使用Python中的简单语法和少量的代码来完成此任务,需要的朋友可以参考下
    2023-06-06
  • Python数据结构之栈、队列的实现代码分享

    Python数据结构之栈、队列的实现代码分享

    这篇文章主要介绍了Python数据结构之栈、队列的实现代码分享,具有一定参考价值,需要的朋友可以了解下。
    2017-12-12
  • Python中迭代器的创建与使用详解

    Python中迭代器的创建与使用详解

    Python中的迭代器是一个对象,用于迭代可迭代对象,如列表,元组,字典和集合,这篇文章主要为大家介绍了Python中迭代器的创建与使用,需要的可以参考下
    2023-08-08
  • Python基于BeautifulSoup爬取京东商品信息

    Python基于BeautifulSoup爬取京东商品信息

    这篇文章主要介绍了Python基于BeautifulSoup爬取京东商品信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • Python设计模式之解释器模式原理与用法实例分析

    Python设计模式之解释器模式原理与用法实例分析

    这篇文章主要介绍了Python设计模式之解释器模式原理与用法,结合具体实例形式分析了解释器模式的概念、原理、定义及使用方法,需要的朋友可以参考下
    2019-01-01
  • Python 实现交换矩阵的行示例

    Python 实现交换矩阵的行示例

    今天小编就为大家分享一篇Python 实现交换矩阵的行示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-06-06

最新评论