MUI在Android与IOS上的一些小问题以及一些框架的用法
栏目: JavaScript · 发布时间: 5年前
内容简介:我费话少说,上正文;
我费话少说,上正文;
区域滚动与下拉刷新、上拉加载在安卓上有冲突,一但调用了区域滚动也就是:
<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
放在最外面。
mui.plusReady(function() { plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 }); //iOS 6一下只要调用上面的就行了 if (mui.os.ios) { if (812>screen.height >=667 && screen.width >=375){ //苹果6及以上 $(".comment_btn").css('position','absolute'); } } }); 这些在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/.css
和 mui.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); })复制代码
具体详细信息请看官网http://dev.dcloud.net.cn/mui/ui/#dtpicker
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- SQLAlchemy框架用法详解
- Python:轻量级 ORM 框架 peewee 用法详解之——增删改查
- PHP 转 Go,用 Laravel、thinkphp 的用法造了一个 ThinkGo 框架
- AWK 的用法
- AWK基础用法
- UniversalImageLoader的用法总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。