基于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使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码

    Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码

    这篇文章主要介绍了Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码,需要的朋友可以参考下
    2018-03-03
  • Python 实现任意区域文字识别(OCR)操作

    Python 实现任意区域文字识别(OCR)操作

    这篇文章主要介绍了Python 实现任意区域文字识别(OCR)操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-03-03
  • Python函数式编程的用法详解

    Python函数式编程的用法详解

    Python函数式编程是一种编程范式,它强调使用纯函数来处理数据,在函数式编程中,函数被视为一等公民,可以像值一样传递和存储,本教程将介绍如何使用Python进行函数式编程,并提供一些示例,需要的朋友可以参考下
    2023-06-06
  • Python通过串口实现收发文件

    Python通过串口实现收发文件

    这篇文章主要为大家详细介绍了Python如何通过串口实现收发文件功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • Python快速实现简易贪吃蛇小游戏的示例代码

    Python快速实现简易贪吃蛇小游戏的示例代码

    贪吃蛇(也叫做贪食蛇)游戏是一款休闲益智类游戏,有PC和手机等多平台版本。既简单又耐玩。本文将利用Python语言快速实现简易贪吃蛇小游戏,感兴趣的可以尝试一下
    2022-10-10
  • matplotlib 生成的图像中无法显示中文字符的解决方法

    matplotlib 生成的图像中无法显示中文字符的解决方法

    这篇文章主要介绍了matplotlib 生成的图像中无法显示中文字符的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 解决phantomjs截图失败,phantom.exit位置的问题

    解决phantomjs截图失败,phantom.exit位置的问题

    今天小编就为大家分享一篇解决phantomjs截图失败,phantom.exit位置的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • Django中QuerySet查询优化之prefetch_related详解

    Django中QuerySet查询优化之prefetch_related详解

    prefetch_related()和select_related()的设计目的很相似,都是为了减少SQL查询的数量,但是实现的方式不一样,下面这篇文章主要给大家介绍了关于Django中QuerySet查询优化之prefetch_related的相关资料,需要的朋友可以参考下
    2022-11-11
  • 浅谈Pandas Series 和 Numpy array中的相同点

    浅谈Pandas Series 和 Numpy array中的相同点

    今天小编就为大家分享一篇浅谈Pandas Series 和 Numpy array中的相同点,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-06-06
  • Python如何为图片添加水印

    Python如何为图片添加水印

    这篇文章主要介绍了Python如何使用Python-Pillow库给图片添加水印的方法,非常的简单实用,有需要的小伙伴可以参考下
    2016-11-11

最新评论