阅读 683

MUI在Android与IOS上的一些小问题以及一些框架的用法

我费话少说,上正文;

区域滚动与下拉刷新、上拉加载在安卓上有冲突,一但调用了区域滚动也就是:

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>复制代码

那么区域滚动在安卓上将无法滑动,iOS则没有影响。

并且就算iOS没有初始化区域滚动也没有影响。

//初始化区域滚动
mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
只要在下拉刷新与上拉加载的标识div里加上class为mui-scroll就可以拥有回弹效果;
<div  id="goodsList" class="posit_rel lin-item">//刷新标识div
    <div class="mui-scroll">
       <!--  主要内容 -->
    </div>
</div>这样的话两边就可以正常进行下拉刷新和上拉加载了,但是iOS要设置滑动区域的高度限制。
复制代码

至于横向区域滚动与下拉刷新冲突的问题

加上这个样式,就可以解决了

 .mui-plus-pullrefresh .mui-scroll { position: absolute; width: 100%; } 复制代码

如果上面的不行,用下面的样式: 宽度根据自己的情况来定,但 100%和auto不行

 .mui-scroll-wrapper .mui-scroll{ width: 544px !important; } 复制代码

调用原生等待模态窗不制止其他事件的运行:

plus.nativeUI.showWaiting("正在加载...",{modal:false});
当modal为false时等待框不阻止其他事件的运行,比如点击返回等,默认为true复制代码

iOS滑动监听问题:

因为iOS不能实时监听$(window).on('scroll'),会在滑动停止后才触发,touchmove事件也没法监听回弹效果,所以我们还是的调用区域滚动,用div模拟

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>
//初始化区域滚动
var serve_scroll = mui('.mui-scroll-wrapper').scroll();
//滚动高度
$('.mui-scroll-wrapper').scroll(function () {
serve_scroll.y  //高度
mui('.server_scroll_wrapper').scroll().scrollTo(0, 0, 100);//100毫秒滚动到顶
});
复制代码

iOS底部input position: fixed;定位问题

在安卓上input聚焦时,input定位不会错乱,但是在iOS中position: fixed;就变成absolute了,所以我们要把这个input放在最外面。

  plus.webview.currentWebview().setStyle({
            softinputMode: "adjustResize"  // 弹出软键盘时自动改变webview的高度
        });
        if(mui.os.ios){
            if (screen.height >=667 && screen.width >=375){
                //苹果6及以上
                $(".comment_btn").css('position','absolute');
            }
            var interval;
            //解决第三方软键盘唤起时底部input输入框被遮挡问题
            var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
            $(".comment_btn").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件
                interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近
                    document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
                },100)
            }).blur(function(){//设定输入框失去焦点时的事件
                clearInterval(interval);//清除计时器
                document.body.scrollTop = bfscrolltop;
                //将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
            });
这些在mui上真机运行是可以的,但是打包的时候加入iOS原生的东西就不行了,具体原因我也找不出来。。。复制代码

自定义事件mui.fire();

执行自定义事件,在某页面添加自定义事件,然后在任意页面都可执行,只要正确找到这个自定义事件页面的ID, 例如在列表页面添加自定义事件,在详情页面执行。

添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

//列表页面
window.addEventListener('newsId',function(event){
  //通过event.id可获得传递过来的参数内容
  ....
});
复制代码
  //详情页面
  //获取列表页的ID
  var  list = plus.webview.getWebviewById('list.html');
  //触发列表页面的newsId事件
  mui.fire(list,'newsId',{
    id:id //传过去的参数
  });复制代码

图片轮播

默认不支持循环播放,DOM结构如下:

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>复制代码

若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循环,需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循环,需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>复制代码

mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});复制代码

因此若希望图片轮播不要自动播放,而是用户手动滑动才切换,只需要通过如上方法,将interval参数设为0即可。

若要跳转到第x张图片,则可以使用图片轮播插件的gotoItem方法,例如:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;复制代码

注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态生成完整DOM (包含mui-slider下所有DOM结构) 后,手动调用图片轮播的初始化方法;

mui页面地址:http://dev.dcloud.net.cn/mui/ui/#gallery

mui选择器,包括日期选择器等

官网是这么说的:

*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js

但是进过个人实测,最好还是引入压缩版本mui.poppicker.js/.cssmui.picker.min.js比较好,否则有可能报错picker is no......

文件下载地址:
github.com/jiaofuzeng/…

通过new mui.PopPicker()初始化popPicker组件

 var picker = new mui.PopPicker(); 复制代码

给picker对象添加数据

setData() 支持数据格式为: 数组

 picker.setData([{value:'zz',text:'智子'}]); 复制代码

显示picker

 picker.show( SelectedItemsCallback ) 复制代码

实例

 var picker = new mui.PopPicker();
 picker.setData([{value:'zz',text:'智子'}]);
 picker.show(function (selectItems) {
    console.log(selectItems[0].text);//智子
    console.log(selectItems[0].value);//zz 
  })复制代码

日期组件通过new mui.DtPicker()初始化DtPicker组件

	 var dtPicker = new mui.DtPicker(options); options为类型 ‘date’类型为YYYY-MM-DD
复制代码

显示picker

 
	dtPicker.show( SelectedItemsCallback ) 
	复制代码

实例

    var dtPicker = new mui.DtPicker(); 
    dtPicker.show(function (selectItems) { 
        console.log(selectItems.y);//{text: "2016",value: 2016} 
        console.log(selectItems.m);//{text: "05",value: "05"} 
    })复制代码

*如果设置多级默认值可依次获取每一层级Picker对象并设置默认值,如下:

var picker = new mui.PopPicker({
    layer: 2
});
    picker.setData([{
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "东城区"
        }]
    }, {
        value: '120000',
        text: '天津市',
        children: [{
	        value: "120101",
            text: "和平区"
        }, {
            value: "120102",
            text: "河东区"
        }, {
            value: "120104",
            text: "南开区"
        }
        ]
    }])
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(SelectedItem) {
	console.log(SelectedItem);
})复制代码

具体详细信息请看官网dev.dcloud.net.cn/mui/ui/#dtp…
转载请附上本文链接:juejin.im/post/5be261…


关注下面的标签,发现更多相似文章
评论