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

目录
  • 1、前言
  • 2、问题描述
  • 3、解决方案
  • 4、结语

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

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标签跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VUE中使用MUI方法

    VUE中如何使用MUI 1.第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 2.第二步:拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 . 若引入的mui.css报错,可能是mui中url会指向一些图片,将图片地址的单引号改为双引号就可以了. 3.第三步:引入MUI的样式 在main.js文件中,引入mui的样式 import 'mui.css文件的相对路径'; 如 import '../mui/css/mui.css'

  • 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

    微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

    本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件 点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 实现方案1:左侧菜单和右侧展示页面分为上下两层 wxml <view class="page"> <----下层左侧导航---> <view class="page-bottom"> <view class="pag

  • mui js控制开关状态、修改switch开关的值方法

    修改开关的值 .mui-switch:before{ font-size: 13px; position: absolute; top: 3px; right: 11px; content: attr(data-off); text-transform: uppercase; color: #999; } .mui-switch.mui-active:before{ right: auto; left: 15px; content: attr(data-on); color: #fff; } <

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="false" bindscroll="scroll&qu

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

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

    目录 1.前言 2.问题描述 3.解决方案 4.结语 本文转自微信公众号:"算法与编程之美" 1.前言 侧滑是一个非常实用的选项组件,它在Android App应用中非常广泛,常见的场景有:下拉刷新,侧滑抽屉,侧滑删除,侧滑返回以及侧滑菜单等.就是因为侧滑应用太过于广泛,它所带来的问题也是应接不暇. 2.问题描述 在实际操作过程中,实现侧滑菜单带来了那么一个问题,侧滑菜单已经实现,但是侧滑导航的子选项卡里的内容要如何实现跳转,通常想到的办法便是建立<a>标签选项卡进行her

  • MUI 实现侧滑菜单及其主体部分上下滑动的方法

    在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑,而MUI侧滑菜单默认是没有上下滑动功能的,需要激活. 1.首先在 class="mui-scroll-wrapper" 的元素上添加ID: <!-- 侧滑导航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 菜单容器 --> <aside class="mui-off-canvas-left&q

  • 基于python实现MUI区域滚动

    基于python实现MUI区域滚动

    目录 1.前言 2.问题描述 3.解决方案 4.结语 本文转自微信公众号:"算法与编程之美" Python用HBuilder创建交流社区APP 基于Python实现MUI侧滑菜单a标签跳转 基于Python 优化 MUI标题栏 基于python使MUI登录页面的美化 1.前言 MUI提供了区域滚动的组件,使用时遵循DOM结构就可以.若是需要使用区域滚动的组件,就需要初始化scroll控件.本次在制作页面时关于区域滚动遇到了一些问题将会在下文展开. 2.问题描述 在创建好区域滚动之后不能

  • 基于python使MUI登录页面的美化

    基于python使MUI登录页面的美化

    目录 1.前言 2.问题描述 3.解决方案 (1)背景美化 (2)输入框美化 4.结语 本文转自微信公众号:"算法与编程之美" 1.前言 之前的文章Python用HBuilder创建交流社区APP我们已经在HBuilder上创建的APP ,现HBuilder中已经有了登录页面的相关的html文件,但是按照html已有的页面来看,它缺少外观的美化.现在大多数软件需要外观的加成,本篇文章主要讲的是MUI登录页面的美化. 2.问题描述 在将主要的内容构造之后,如今思考如何实现将页面进行美化是

  • 基于Python 优化 MUI标题栏

    基于Python 优化 MUI标题栏

    目录 一.前言 二.问题描述 三.解决方案 1.  创建一个带返回键标题栏 2.更改标题栏的背景颜色 3.更改标题栏的字体颜色 4.更改标题栏的字体 四.结语 本文转自微信公众号:"算法与编程之美" 一.前言 三步搭建MUI页面主框架法包括新建含mui的HTML文件.输入mheader(标题栏).输入mbody(主体).一个特色鲜明MUI界面无疑是能够吸引用户的关键之一,这利用css和JavaScript可以很快进行实现,但是同时对于初学者来说也是困难的,这就需要几个简单的小技巧实现页

  • 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

    微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

    本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果 点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层 实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">

  • Android侧滑菜单和轮播图之滑动冲突问题

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开发人员自定义的)拦截了. 基于这个猜测,我自定义一个ViewPager,重写dispatchTouchEvent.onInterceptTouchEvent和onTouchEvent,分别在这三个方法中打印log: 重写SlidingMenu的dispatchTouchEvent.onInterce

  • 基于python tkinter的点名小程序功能的实例代码

    代码如下所示: import datetime import json import os import random import tkinter as tk import openpyxl # 花名册文件名 excel_file_path = "花名册.xlsx"#需在当前目录创建对应花名册.xlsx # 工作表名 excel_sheet = "Sheet1" # 记录存储文件名 file_path = "name_record.json"

  • 基于Python实现一个简易的数据管理系统

    基于Python实现一个简易的数据管理系统

    目录 创建mysql数据表 增删改查 启动应用  为了方便的实现记录数据.修改数据没有精力去做一个完整的系统去管理数据.因此,在python的控制台直接实现一个简易的数据管理系统,包括数据的增删改查等等.只需要在控制台层面调用相应的功能调用查询.修改等功能,这里记录一下实现过程. 创建mysql数据表 使用比较熟悉的数据库客户端来进行操作,这里使用的是navicate客户端来创建好相应的数据表. 创建数据库并指定编码字符集. CREATE DATABASE `data_boc` CHARACTE

随机推荐