精华内容
下载资源
问答
  • mui赋值_javascript · MUI

    2020-12-18 22:31:25
    打开新页面做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个...mui的解决思路是:单webview只承载单个页面的dom...

    打开新页面

    做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃;

    mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.

    mui.openWindow({

    url:new-page-url,

    id:new-page-id,

    styles:{

    top:newpage-top-position,//新页面顶部位置

    bottom:newage-bottom-position,//新页面底部位置

    width:newpage-width,//新页面宽度,默认为100%

    height:newpage-height,//新页面高度,默认为100%

    ......

    },

    extras:{

    .....//自定义扩展参数,可以用来处理页面间传值

    },

    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示

    show:{

    autoShow:true,//页面loaded事件发生后自动显示,默认为true

    aniShow:animationType,//页面显示动画,默认为”slide-in-right“;

    duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;

    },

    waiting:{

    autoShow:true,//自动显示等待框,默认为true

    title:'正在加载...',//等待对话框上显示的提示内容

    options:{

    width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度

    height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度

    ......

    }

    }

    })

    参数说明:

    styles表示窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。

    extras:新窗口的额外扩展参数,可用来处理页面间传值;例如:var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name);,会输出"mui"字符串;注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。

    createNew:是否重复创建相同id的webview;为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:若createNew为true,则不判断重复,每次都新建webview;若为fasle,则先计算当前App中是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;该参数可能导致的影响:若业务写在plusReady事件中,而plusReady事件仅首次创建时会触发,则下次再次通过mui.openWindow方法打开同样webview时,是不会再次触发plusReady事件的,此时可通过自定义事件触发;案例参考:http://ask.dcloud.net.cn/question/6514;

    show表示窗口显示控制。autoShow:目标窗口loaded事件发生后,是否自动显示;若目标页面为预加载页面,则该参数无效;aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow

    waiting表示系统等待框;mui框架在打开新页面时等待框的处理逻辑为:显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的参数:autoShow表示自动显示等待框,默认为true,若为false,则不显示等待框;注意:若显示了等待框,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字,options表示等待框显示参数,比如宽高、背景色、提示文字颜色等,具体可参考5+规范中的WaitingOption。

    示例1:Hello mui中,点击首页右上角的图标,会打开关于页面,实现代码如下:

    //tap为mui封装的单击事件,可参考手势事件章节

    document.getElementById('info').addEventListener('tap', function() {

    //打开关于页面

    mui.openWindow({

    url: 'examples/info.html',

    id:'info'

    });

    });

    因没有传入styles参数,故默认全屏显示;也没有传入show参数,故使用slide-in-right动画,新页面从右侧滑入。

    示例2:从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验(最好的用户体验应该是通过预加载的方式):第一步,B页面loaded事件发生后,不自动显示;

    //A页面中打开B页面,设置show的autoShow为false,则B页面在其loaded事件发生后,不会自动显示;

    mui.openWindow({

    url: 'B.html',

    show:{

    autoShow:false

    }

    });

    第二步,在B页面获取列表数据后,再关闭等待框、显示B页面

    //B页面onload从服务器获取列表数据;

    window.onload = function(){

    //从服务器获取数据

    ....

    //业务数据获取完毕,并已插入当前页面DOM;

    //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;

    mui.plusReady(function(){

    //关闭等待框

    plus.nativeUI.closeWaiting();

    //显示当前页面

    mui.currentWebview.show();

    });

    }

    展开全文
  • mui赋值_mui input用法

    2020-12-18 22:29:15
    input:focus{border:none !important;}input[type=date] {background-color:transparent;border: none;FILTER: alpha(opacity=0); /*androd*/appearance:none; /*下拉框去掉右侧图标*/-moz-appearance:none;...

    input:focus{

    border:none !important;

    }

    input[type=date] {

    background-color:transparent;

    border: none;

    FILTER: alpha(opacity=0); /*androd*/

    appearance:none; /*下拉框去掉右侧图标*/

    -moz-appearance:none;

    -webkit-appearance:none;

    }

    .ui-btn, label.ui-btn {

    font-weight: normal;

    border-width: 1px;

    border-style: solid;

    }

    .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {

    content: "";

    position: absolute;

    display: block;

    width: 0px;

    height: 22px;

    }

    .click{

    width: 100px;

    height: 50px;

    background-color: red;

    }

    .tap{

    width: 100px;

    height: 50px;

    background-color: blue;

    }

    .taphold{

    width: 100px;

    height: 50px;

    background-color: palegreen;

    }

    年纪

    一年级

    二年级

    三年级

    四年级

    简单描述

    性别

    Male

    Female

    您可以选择多天:

    星期一

    星期二

    星期三

    星期四

    星期五

    星期六

    星期日

    出发日期

    pageinit

    选择天

    星期一

    星期二

    星期三

    星期四

    星期五

    星期六

    星期日

    /body>

    $(document).on("pageinit","#page",function(){

    console.log("页面加载完成")

    })

    $(".click").on("click",function(){

    $(this).hide()

    })

    /*点击触发*/

    $(".tap").on("tap",function(){

    $(this).hide()

    })

    /*taphold长按超过1秒时间*/

    $(".taphold").on("taphold",function(){

    alert("删除")

    })

    /*swipe水平滑动超过30px触发的事件*/

    $("#page").on("swipe",function(){

    alert("滑动")

    })

    上面input结合媒体查询使用

    .my-control,.my-label{ display: inline-block !important; }

    .my-label{ color:gray; }

    @media all and (min-width:768px ) {

    .my-label{ width: 25%; }

    .my-control{ width: 73%; }

    }

    @media all and (min-width:500px ) and (max-width:767px) {

    .my-label{ width: 36%; }

    .my-control{ width: 68%; }

    }

    @media all and (min-width:350px ) and (max-width:499px) {

    .my-label{ width: 27%; }

    .my-control { width: 70%; }

    }

    @media all and (max-width:350px ) {

    .my-label{ width: 30%; }

    .my-control{ width: 63%; }

    }

    展开全文
  • 这是在app项目早期所遇到的问题,在这个项目中,使用mui作为页面的基础效果,布局的实现,使用vue来进行整个网站所有数据的渲染,于是首当其冲的第一个问题,就是页面参数的传递。对于mui,有很好的页面参数传递方案...

    这是在app项目早期所遇到的问题,在这个项目中,使用mui作为页面的基础效果,布局的实现,使用vue来进行整个网站所有数据的渲染,于是首当其冲的第一个问题,就是页面参数的传递。对于mui,有很好的页面参数传递方案,但是如何把mui传递的参数绑定到vue中,就稍微有那么一些麻烦了,在研究了一段时间后,共总结了两个办法,发在文章里留做记录。

    以我要传递的参数名称为url为例。

    方法一:带地址后缀传参

    1.在准备传参数的页面,openWindow方法中,直接给要传参的页面加后路径,就像是常见的get请求一样,代码如下。mui.openWindow({

    url:"text.html?url="+url,

    id:"text.html",

    waiting: {

    autoShow: true,

    }

    })

    2.在接收参数的页面,首先在js外面定义一个接收参数的全局方法。function getname(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.search.substr(1).match(reg);

    if(r != null) return unescape(r[2]);

    return null;

    }

    然后在vue中定义初始的字段。el:'#app',

    data:{

    url:'',

    },

    最后,执行之前定义的获取参数方法,将值附加到初始字段created(){

    this.url= getname('currency');

    },

    方法二:mui自带的data数组传参

    1.在准备传参数的页面,openWindow方法中,定义extras,代码如下;mui.openWindow({

    url:"text.html",

    id:"text.html",

    extras:{

    url:'https://www.ruletree.club',

    }

    waiting: {

    autoShow: true,

    }

    })

    2.在接收参数的页面中,直接通过mui的方式获取,并附加vue字段,记得先定义好url字段created(){

    mui.plusReady(function(){

    var self = plus.webview.currentWebview();

    var url = self.url;//获得参数

    vm.url = url; //参数赋值

    });

    },

    以上就是mui混合vue开发时的主要传参方法,感觉还算简单,坑也不算太多。

    2758bbf9b8558208e17233a033ec8e3d.png

    打赏

    f9dedae40642caf3cbefafd34bdd2e76.png支付宝支付

    您的大名:

    1 元

    5 元

    10 元

    20 元

    50 元

    100 元

    万水千山总是情,给个打赏行不行。

    打赏

    23343b78e9b269ca24c62490ceade6ea.png

    原创文章,作者:不暇,如若转载,请注明出处:https://www.ruletree.club/archives/1956/

    展开全文
  • url: basePath + "wx/appFindProject.dd",type: "post",dataType: "json",success: function(result) {if(result[0] == null) {return false;...var userPicker = new mui.PopPicker();var data...

    url: basePath + "wx/appFindProject.dd",

    type: "post",

    dataType: "json",

    success: function(result) {

    if(result[0] == null) {

    return false;

    }

    var datas = result[0];

    var userPicker = new mui.PopPicker();

    var data = "[";

    for(var i=0;i

    if(i==datas.length-1){

    data = data + "{'value':'"+datas[i][0]+"','text':'"+datas[i][1]+"'}";

    }else{

    data = data + "{'value':'"+datas[i][0]+"','text':'"+datas[i][1]+"'}"+",";

    }

    }

    data = data +"]";

    alert(data);

    userPicker.setData(data);

    var showProjrctBtn = document.getElementById('showProjrct');

    showProjrctBtn.addEventListener('tap', function(event) {

    userPicker.show(function(items) {

    alert(items[0].text);

    $('#projectName').val(items[0].text);

    //返回 false 可以阻止选择框的关闭

    //return false;

    });

    }, false);

    报错信息:

    展开全文
  • **代码项给mui单选框赋值 ** function getRadio(){ Util.ajax({ url:'./js/reason.json', type:'GET', data:JSON, success:function(data){ var requestdata = data.reason; console.log(requestdata...
  • MUI搜索框动态赋值样式问题

    千次阅读 2018-12-25 10:03:01
    问题:在用HBuilder、MUI进行移动开发时,搜索框内输入内容点击搜索后,再返回,搜索框会出现如下情况: ...mui-action-back mui-icon mui-icon-left-nav mui-pull-left">&...
  • 这里我发现,如果将上面的json数组使用静态方法直接赋值mui的选择器是可以直接使用的,但是我用动态赋值的方法则不行,不光是不行,连值我都打印不出来,后来我估计应该是数据有问题,导致js都失效了,后来改了一...
  • mui框架的实例中,下拉都是固定的json格式数据,但是我们实际开发过程中,需要从后来动态获取值,并回显到下拉框,效果如下 前端以jsp为例: 由于需要向后台传值,我们采用form表单的方式进行提交,所以,增加...
  • MUI的picker默认选中的时候有个傻x的bug,这是用框架送的。在设置默认选中值,以及动态赋值设置默认选中值的时候。第一级可以成功设置默认选中,但是第二级和第三级,并不能设置默认选中。 1、这是应该算是大家常规...
  • mui 子页面回传值到父页面

    千次阅读 2017-12-07 22:10:40
    问题:打开子页面之后,获得一个值,需要该值传回父页面,赋值给父页面的某个input框。 此时可以使用mui 下的自定义事件mui.fire()。 官网API地址:http://dev.dcloud.net.cn/mui/event/#customevent代码: 1、在...
  • 数字输入框,用v-model 绑定在... 1.先定义变量 2.在进行赋值 mui(".mui-numbox").numbox().setValue(this.weight) 3.给按钮绑定函数取值 参考链接 https://blog.csdn.net/LzzMandy/article/details/85054475 ...
  • 关于这种表单文本,获取详情信息赋值到每一个对应的内容,需通过name来赋值。 <form class="mui-input-group" id="userform" name="Uform"> <div class="mui-input-row"> <label>姓名</...
  • 前段时间,刚学着开发webapp,然后就入坑MUI了。 在测试 H5+接口plus.contacts.getAddressBook通讯录保存时 安卓能正常保存,但IOS一直会提示出错。   经过批量参数赋值得到解决方法:需给contact 中...
  • MUI 请求的页面无法打开 viewgroup

    千次阅读 2017-06-09 14:52:02
    只能说官方的demo确实不太严谨,这么关键的参数竟然没有备注, ...方法二、获取当前页面的id,赋值给他就行了。 mui.plusReady(function() { var currentId=plus.webview.currentWebview().id; var group
  • mui("#popover").popover('toggle', document.getElementById("div")); var choose = document.getElementsByName("choose"); for (var i = 0; i ; i++) { if( choose[i].checked ) { //alert...
  • mui真的是个很神奇的app开发框架,对于我这个新手小白来说还算行,好废话不多说,今天来讨论打开一个新页面时父页面像子页面传值的过程。 父页面: 首先定义要传的a,b,c. onclick=dustDetail("’ + a + ‘"...
  • 通过mui.ini配置事件,如果是下拉,执行ajax获取后台php接口数据的函数,获取的数据赋值给Vue.js中的列表,然后实时显示数据 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 访问系统相返回值为一个对象,通过转换为字符串可以查看,path.files[0]为返回路径去除路径赋值到src 调用摄像头返回的相片的path为一个路径通过 plus.io.resolveLocalFileSystemURL(path, function(entry) { ...
  • 在用mui开发移动端的过程中,遇到了选择日期后,当再次打开日期时。发现选择日期的界面变成了当天,因为要求是再次打开时,要显示是上次选择的时间,网上查了下发现用picker.setSelectedValue(endTime),完美解决了...
  • C#构造方法(函数) 一、概括 ...简述:用来初始化对象的,为类的成员赋值。 2.构造方法特点 a.方法名与类名相同; b.没有返回值类型; c.必须要通过new的形式调用; 3.语法 访问修...
  • ``` ...但是考虑到用户可能在我的这个页面进行多次搜索,所以不能去赋值为true 执行完在赋值 false 来控制 因为这样只会执行一次 ,用户多次搜索就不能实现 所以各位大佬 有什么好的办法 谢谢
  • 问题描述:两个组件,子组件的会用到父组件异步操作得到的值,所以说,子组件得到的值很可能是 undefine。如何破 问题解决:这里用到 watch属性,子组件对于得到的值进行监视,一旦变化就对... mui('.mui-numbox'...
  • https://my.oschina.net/mui/blog/3017923tinyint长度只是为了补0java 对应 byte 类型, 取值范围 -128~127,无符:0~255在 set 方法赋值的时,用 byte 要强转一下,(所以还是用 int 或 integer 吧 ?)SQL ...
  • 登录与退出登录和退出是多数应用都需要的功能。我们在筋斗云示例应用中,可以看到登录... MUI.handleLogin(data); // g_data.userInfo已赋值 }function logoutUser() { // 这里可以删除当前用户相关的storage, cooki
  • 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 例如vue实例: var addVue = new Vue({ el: '#mui-content', data: { device: { name: "1234", } } }); 需要在这个...
  • Wpf 使用dllImport调用win32 api中的loadstring方法提取MUI资源,然后赋值为ui。 微软自己去判断该用哪个语言,不用自己操心。 优点:可靠,毕竟那么多地方都这么干的。 缺点:麻烦了点 2. 微软给...

空空如也

空空如也

1 2
收藏数 33
精华内容 13
关键字:

mui赋值