精华内容
下载资源
问答
  • mui使用
    2017-04-22 00:58:00

    http://ask.dcloud.net.cn/question/60

    转载于:https://www.cnblogs.com/007sx/p/6746684.html

    更多相关内容
  • webapp前端UI框架之MUI使用教程.zip
  • mui('body').on('tap', 'a', function () { [removed].href = this.href; }); 这样做是行的,但是有很多问题,比如点击侧栏的时候,就不出现,错误很多, 经实践自己的方法还是可行的,写多了jquery,竟然调试js原生...
  • mui使用帮助文档

    2017-06-12 17:45:35
    mui开发过程中会使用到的一些常用控件的css代码和js脚本
  • h5 - mui 使用技巧

    千次阅读 2019-04-29 10:49:39
    1、包含 mui 等 开发大佬(学习); 开始进军h5开发,不断学习。 <script type="text/javascript"> mui.init({ subpages: [{ // 打开子页面,为解决低端机不流畅的问题 url: 'index.html', id: '...
    学习文献
    mui 官网1、包含 mui 等 开发大佬(学习);
    2、登录页、注册页 方法;
    ——
    tomact服务器 大佬简书大佬,js 可以学习(懒加载);
    Hybrid介绍 叶小钗大佬

    开始进军h5开发,不断学习。

    <script type="text/javascript">
    	mui.init({
    		subpages: [{ // 打开子页面,为解决低端机不流畅的问题
    			url: 'index.html',
    			id: 'index.html', // 可自定义
    			styles: {
    				// 更改子页面的样式
    
    			}
    		}];
    		// 页面预加载:
    		preloadPages: [{
    			url: 'index.html',
    			id: 'index.html',
    		}]
    	});
    	mui.plusReady(function() { // 页面初始化
    		// 2、在原生mui组件中跳转,需要找到id做跳转事件
    		// tab 为跳转事件方式
    		document.getElementById('#opentals').addEventListener('tab', function() {
    			mui.openWindow({
    				url: 'index.html',
    				id: 'index.html'
    			})
    		})
    
    		// 1.1 、页面接收传参,键值对关系
    		var statData = plus.webview.currentWebview(); //拿到对象
    		mui.toast(statData.name) //弹出 张三
    		// 输出到页面
    		var name1 = mui('#name');
    		name1[0].innerHTML = statData.name;
    	});
    	
    	//1、自定义页面跳转(按钮元素,a标签), openTals 为点击事件函数;   在 原生mui组件中使用效果并不理想
    	// <button type="button" οnclick="openTals();" ></button>
    	function openTals() {
    		mui.openWindow({
    			url: 'index.html',
    			id: 'index.html',
    			show: {}, // 是否显示动画
    			extras: { // 传递值,键值对
    				name: '张三',
    				/* 姓名: <span id="name"></span> */
    			}
    		})
    	}
    </script>
    

    坑货mui,那么多坑!!!浪费我五一两天的时间就做了app连接到手机和tab底部导航现实的问题!一度怀疑自己的智商是不是出了问题

    mui的坑有很多,而我才刚刚爬,且爬且珍惜!

    先说tab导航栏重复加载的问题吧:

    这个坑也是很无语,在index.html 里不能出现这个页面,因为这是app的启动页!!!

    好坑啊。。。

    好想找个厕所哭

    解决的办法就是a标签上不引用,在底部导航的a标签中跳转到不同的页面,就行了!!!

    并且百度的也有很多坑的博客,无力吐槽了,记录下来自己用吧
    在这里插入图片描述
    正确方法:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title></title>
    		<link href="./css/mui.min.css" rel="stylesheet" />
    	</head>
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<h1 class="mui-title">标题</h1>
    		</header>
    		<nav class="mui-bar mui-bar-tab">
    			<a class="mui-tab-item mui-active" href="html/a.html">
    				<span class="mui-icon mui-icon-home"></span>
    				<span class="mui-tab-label">首页</span>
    			</a>
    			<a class="mui-tab-item" href="html/b.html">
    				<span class="mui-icon mui-icon-phone"></span>
    				<span class="mui-tab-label">电话</span>
    			</a>
    			<a class="mui-tab-item" href="html/c.html">
    				<span class="mui-icon mui-icon-star"></span>
    				<span class="mui-tab-label">功能</span>
    			</a>
    		</nav>
    
    
    		<script src="./js/mui.min.js"></script>
    		<script type="text/javascript" charset="utf-8">
    			//底部选项卡切换跳转
    			(function() {
    				var subpages = ['html/a.html','html/b.html', 'html/c.html'];
    
    				var subpage_style = {
    					top: '40px',
    					bottom: '51px'
    				};
    
    				//创建子页面,首个选项卡页面显示,其它均隐藏;
    				mui.plusReady(function() {
    
    					var self = plus.webview.currentWebview();
    					for (var i = 0; i < subpages.length; i++) { // 如果i等于所有的子页面的话,那么子页面的js都会去执行
    						var temp = {};
    						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
    
    						if (i > 0) {
    							sub.hide();
    						}
    						self.append(sub);
    					}
    				});
    
    				var activeTab = subpages[0];
    				//选项卡点击事件
    				mui('.mui-bar-tab').on('tap', 'a', function(e) {
    					var targetTab = this.getAttribute('href');
    
    					console.log(targetTab)
    
    					if (targetTab == activeTab) {
    						return;
    					}
    
    					var self = plus.webview.currentWebview();
    					var sub = plus.webview.create(targetTab, targetTab, subpage_style);
    					self.append(sub);
    					//隐藏当前;
    					plus.webview.hide(activeTab); //这里应该是关闭页面,不知道隐藏与关闭区别有多大
    					//更改当前活跃的选项卡
    					activeTab = targetTab;
    				});
    				//初始化
    				mui.init();
    
    			})()
    		</script>
    	</body>
    </html>
    
    

    然后就是连接到手机:

    第一:在电脑和手机上下载360手机助手,然后打开开发者选项,usb连接到电脑,以供hbuilder调用;(这一步也可不用)

    第二:在hbuilder官网下载 Hello H5+ 这样一个软件,当初找个废了很多时间,而且在百度上也没有具体的教程,坑货;

    第三:hbuilderX上反正我是没找到真机调试的方法,而是通过老版的hbuilder上进行的真机测试,也是坑!

    安卓和ios上的设备管理需要进行授权信任HBbuilder;

    展开全文
  • 错误示范 ...div class = "mui-content"> <div id="popover" class="mui-popover"> <ul class="mui-table-view"> <li class="mui-table-view-cell"><a href="#">...

    错误示范

    <div class = "mui-content">
    
    
    		    <div id="popover" class="mui-popover">
    		      <ul class="mui-table-view">
    		        <li class="mui-table-view-cell"><a href="#">Item1</a></li>
    		        <li class="mui-table-view-cell"><a href="#">Item2</a></li>
    		      </ul>
    		    </div>
    	    
    	    
    	   	   <a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
    
    
    </div>
    

    然后你一点击, 菜单是出来的, 不过蒙着的

    正确示范

    <div class = "mui-content">
    	    <a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
    </div>
    
    
    
        <div id="popover" class="mui-popover">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell"><a href="#">Item1</a></li>
            <li class="mui-table-view-cell"><a href="#">Item2</a></li>
          </ul>
        </div>
    

    菜单被蒙着的原因是因为 <div id="popover" class="mui-popover">被放到了里面,只要把 <div id="popover" class="mui-popover">拿到<div class = "mui-content">的外面就可以了

    展开全文
  • 主要介绍了MUI Scroll插件的使用详解,需要的朋友可以参考下
  • mui使用百度地图sdk及定位方法

    千次阅读 2018-05-24 15:53:06
    一、使用前配置:参考http://ask.dcloud.net.cn/article/29 注意事项: (1)HBuilder默认打包使用的签名为"BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58"(Android打包证书)。 (2)...

    一、使用前配置:参考http://ask.dcloud.net.cn/article/29

           注意事项:

        (1)HBuilder默认打包使用的签名为"BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58"(Android打包证书)。

        (2)应用包名,在提交App云端打包时默认为“io.dcloud.%APPID%”(用户可自定义修改),调试时建议使用“io.dcloud.HBuilder”,这样可以直接Hbuilder调试,不用打包成app。

    二、定位代码

    1、使用百度地图jssdk:

        //html引入js

        <script type="text/javascript" src="http://api.map.baidu.com/api?ak=‘你的ak’&v=3.0"></script>

        //js方法

        var map,mapid,mapindex=0,mark,longitude,latitude

        var map = new BMap.Map("allmap", {zoom:17});

        document.addEventListener('plusready', onPlusReady, false);

        function onPlusReady(){
            mapid=plus.geolocation.watchPosition(function(p) {
                mapindex++
                longitude=p.coords.longitude;
                latitude=p.coords.latitude;
                map.clearOverlays();
                var gpsPoint = new BMap.Point(longitude, latitude),
                if(mapindex<4){
                    map.setCenter(gpsPoint);
                }
                if(mapindex==5){
                    plus.geolocation.clearWatch(mapid);
                }
                var marker=new BMap.Marker(gpsPoint)
                map.addOverlay(marker);
            }, function(e) {    
               mui.toast("定位失败!");
            },{provider:'baidu',coordsType:"bd09ll",enableHighAccuracy:true});

        }

    2、使用h5+自带的sdk(参考:http://www.html5plus.org/doc/zh_cn/maps.html,http://www.html5plus.org/doc/zh_cn/geolocation.html)

    var map,mapid,mapindex=0
    document.addEventListener('plusready', onPlusReady, false);
    var mark,longitude,latitude
    function onPlusReady(){
        map = new plus.maps.Map("allmap", {zoom:17});
        mapid=plus.geolocation.watchPosition(function(p) {
            mapindex++
            longitude=p.coords.longitude;
            latitude=p.coords.latitude;
            map.clearOverlays();
            var gpsPoint = new plus.maps.Point(longitude, latitude);
            if(mapindex<4){
                map.setCenter(gpsPoint);
            }
            if(mapindex==5){
                plus.geolocation.clearWatch(mapid);
            }
            var marker=new plus.maps.Marker(gpsPoint)
            map.addOverlay(marker);
        }, function(e) {    
           mui.toast("定位失败!");
        },{provider:'baidu',coordsType:"bd09ll",enableHighAccuracy:true});

    }

    3、注意事项:

    (1)由于使用的是百度地图{provider:'baidu',coordsType:"bd09ll",enableHighAccuracy:true}

    (2)之所以使用plus.geolocation.watchPosition,是因为plus.geolocation.getCurrentPosition经常定位差别过大,不准确,所以建议如果你也遇到定位不准的情况下爱,可以尝试使用watchPosition,可能就好了(如果有其他办法能够定位准确,也希望能一起探讨)



    展开全文
  • VUE中使用MUI方法

    2020-12-08 20:19:55
    VUE中如何使用MUI 1、第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件  2、第二步:拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css...
  • 使用mui的下拉刷新和加载更多模板时,发现容器里面的onclick事件或者a超链接事件失效; 因为 mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳转,因此需使用JS对标签添加...
  • Vue项目MUI使用

    2020-03-19 17:21:50
    MUI官网: https://dev.dcloud.net.cn/mui/ui/ 一、下载: 1、下载github内容至本地解压: github地址:https://github.com/dcloudio/mui 2、复制dist文件夹下三个文件至项目中: 二、引入: 在main.js中引入...
  • mui介绍及使用

    千次阅读 2021-11-09 21:14:57
    性能和体验的差距,一直困扰着开发者使用HTML5来开发移动端。一方面,浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题, 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的...
  • mui使用ajax上传图片时,使用formdata设置参数时,需要ajax上传时需要参数 processData: false, contentType: false, var formData = new FormData(); //创建一个forData formData.append('image', ...
  • MUI框架的基本使用

    千次阅读 2021-05-31 08:56:09
    使用MUI框架,在Hbuilder中必须新建HTML5+ APP,并且创建MUI项目,Hbuilder会自动生成代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport...
  • mui-picker使用

    2021-11-26 10:55:11
    mui使用1. 引用相关资源:2. html部分3. js部分 - 实现获取下拉列表的数据4. 问题记录5. 效果 使用 官网地址:mui-picker 1. 引用相关资源: <link rel="stylesheet" href="../airportCart/css/mui.min.css" /&...
  • mui 功能例子

    2019-04-17 11:11:00
    js,jquery-3.3.1.js,mui.poppicker.js,mui.js,mui.min.js,beecloud.js,mui.picker.min.js,vue.min.js,arttmpl.js,iview.js,mui.previewimage.js,mui.listpicker.js,mui.locker.js,mui.view.js,mui.dtpicker.js,...
  • 使用mui显示百度地图

    2021-11-29 10:07:26
    使用mui显示百度地图 android应用在使用百度地图的时候通常需要配置很多信息,那么mui打包的APK可以直接通过JavaScript的Api实现简单的地图功能 1.百度地图开放平台的秘钥 我们可以直接创建浏览器端的AK 秘钥即AK...
  • Barcode的一个实现案例 一、简介  Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。...
  • 一、 使用该框架之前的准备工作 1. 新建含mui的HTML文件 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用。 2.输入mheade
  • MUI使用方法:

    千次阅读 2019-10-24 14:00:35
    MUI:类似于bootstrapt的代码片段,和bootstrap使用方法类似 官方文档 Github地址 下载github内容至本地,dist文件可以直接引入,examples中是例子,可以参考。 将dist中的内容放到项目中,在入口文件中引入 // 导入...
  • 概述 我的情况是: 大体类似微信的聊天面板 定义了一个header,有标题和返回按钮 中间是可滑动的消息列表 footer是消息输入框和发送按钮 ...此时header的位置会瞬间下滑一段距离后恢复,...打开窗口时使用 titl...
  • 这是我的毕业设计,使用H5 Runtime + Mui + HBuilder结合开发,混合开发得APP(微定位)。 核心功能 多人定位、导航; 与好友聊天、群聊、添加好友、添加群; 登陆注册,支持第三方登陆(QQ、微信、微博); 技术实现...
  • mui使用js跳转窗口、返回窗口

    千次阅读 2018-07-13 14:01:04
    mui使用://初始化单页 view var viewApi = mui('#app').view({ defaultPage: '#setting' }); viewApi.go("#xitong"); 跳转指定窗口 viewApi.back(); //返回上一级窗口
  • 今天小编就为大家分享一篇vue里面使用mui的弹出日期选择插件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,289
精华内容 10,115
关键字:

mui使用