
webview模式-缩放式侧滑(类手机QQ)
MUI提供了非常多的控件,我想其中的侧滑导航大多数MUI使用者都在使用,并且遇到不少难题,而我就是其中一个。大家可以发现MUI模板里面有一个非常亮眼的侧滑导航当属缩放式导航(类手机QQ),这是一个DIV模式的缩放式侧滑,它的优点是可以跟着手势滑动,缺点是不可以复用,其实它还有其它缺点,比如在主页面拥有子webview的情况下,这种缩放式侧滑就无法使用了,由于是div模式的,子webview并不会跟着一起缩放。这就不得不让人舍弃主页面的子webview了,但是一般主页面都有下拉刷新控件的,而下拉刷新最佳的拖动性能是必须使用一个单独的webview去装载下拉刷新,如下图,中间下拉刷新是一个webview,导航和底部菜单是一个webview,因此遇到这种情况我们就需要采用webview模式的缩放式侧滑。

这里我讲解一下我使用webview模式开发的缩放式侧滑,做的不好的地方请指教。首先有一个侧滑页面的webview和主页面的webview,主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html,代码如下:
// 预加载侧滑页面,先让页面藏在显示区域之外-100%
var memberLeftView = mui.preload({
url:'views/member/left.html',
id:'views/member/left.html',
styles: {
left: "-100%",
zindex: -9997,
render:'always'
}
});
然后在触发侧滑的时候设置页面webview的移动位置,侧滑页面首先右移到显示区域,主页面的webview移动到left: '70%',top: '10%',bottom: '10%',的位置,同时打开遮罩,动画300毫秒的移动时间,注意:切勿使用mui.createMash(callback);去创建遮罩,因为主页面是有子webview,会造成不同步且会出现闪动情况。接着在关闭遮罩的时候,再移回原来的位置,这样就实现了简单的webview模式的缩放式侧滑。注意:恢复正常界面的时候隐藏侧滑页面,避免资源消耗。代码如下:
// 我的头像的点击事件
document.getElementById('reho-left-me').addEventListener('tap', function() {
// 侧滑页面出现右移到显示区域
GO_Index.memberLeftView.show('none', 0, function() {
GO_Index.memberLeftView.setStyle({
left: '0',
});
});
// 主界面右移
GO_Index.indexView.show('none', 0, function() {
GO_Index.indexView.setStyle({
left: '70%',
top: '10%',
bottom: '10%',
mask: 'rgba(0,0,0,0.5)',
transition: {
duration: 300
}
});
});
// 每次移除遮罩点击事件,避免重复添加监听
GO_Index.indexView.removeEventListener('maskClick');
// 点击关闭遮罩时
GO_Index.indexView.addEventListener('maskClick', function(){
// 主界面移动到最大显示区域
GO_Index.indexView.setStyle({
left: '0',
top: '0',
bottom: '0',
mask: 'none',
transition: {
duration: 300
}
});
// 侧滑界面移出显示区域之外
GO_Index.memberLeftView.setStyle({
left: "-100%",
transition: {
duration: 300
}
});
// 隐藏侧滑页面,setTimeout避免竞争资源
setTimeout(function() {
GO_Index.memberLeftView.hide();
}, 300);
},false);
});
实现效果如下图:
(更多精彩内容请访问DCloud官网(http://www.dcloud.io/))
MUI提供了非常多的控件,我想其中的侧滑导航大多数MUI使用者都在使用,并且遇到不少难题,而我就是其中一个。大家可以发现MUI模板里面有一个非常亮眼的侧滑导航当属缩放式导航(类手机QQ),这是一个DIV模式的缩放式侧滑,它的优点是可以跟着手势滑动,缺点是不可以复用,其实它还有其它缺点,比如在主页面拥有子webview的情况下,这种缩放式侧滑就无法使用了,由于是div模式的,子webview并不会跟着一起缩放。这就不得不让人舍弃主页面的子webview了,但是一般主页面都有下拉刷新控件的,而下拉刷新最佳的拖动性能是必须使用一个单独的webview去装载下拉刷新,如下图,中间下拉刷新是一个webview,导航和底部菜单是一个webview,因此遇到这种情况我们就需要采用webview模式的缩放式侧滑。
这里我讲解一下我使用webview模式开发的缩放式侧滑,做的不好的地方请指教。首先有一个侧滑页面的webview和主页面的webview,主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html,代码如下:
// 预加载侧滑页面,先让页面藏在显示区域之外-100%
var memberLeftView = mui.preload({
url:'views/member/left.html',
id:'views/member/left.html',
styles: {
left: "-100%",
zindex: -9997,
render:'always'
}
});
然后在触发侧滑的时候设置页面webview的移动位置,侧滑页面首先右移到显示区域,主页面的webview移动到left: '70%',top: '10%',bottom: '10%',的位置,同时打开遮罩,动画300毫秒的移动时间,注意:切勿使用mui.createMash(callback);去创建遮罩,因为主页面是有子webview,会造成不同步且会出现闪动情况。接着在关闭遮罩的时候,再移回原来的位置,这样就实现了简单的webview模式的缩放式侧滑。注意:恢复正常界面的时候隐藏侧滑页面,避免资源消耗。代码如下:
// 我的头像的点击事件
document.getElementById('reho-left-me').addEventListener('tap', function() {
// 侧滑页面出现右移到显示区域
GO_Index.memberLeftView.show('none', 0, function() {
GO_Index.memberLeftView.setStyle({
left: '0',
});
});
// 主界面右移
GO_Index.indexView.show('none', 0, function() {
GO_Index.indexView.setStyle({
left: '70%',
top: '10%',
bottom: '10%',
mask: 'rgba(0,0,0,0.5)',
transition: {
duration: 300
}
});
});
// 每次移除遮罩点击事件,避免重复添加监听
GO_Index.indexView.removeEventListener('maskClick');
// 点击关闭遮罩时
GO_Index.indexView.addEventListener('maskClick', function(){
// 主界面移动到最大显示区域
GO_Index.indexView.setStyle({
left: '0',
top: '0',
bottom: '0',
mask: 'none',
transition: {
duration: 300
}
});
// 侧滑界面移出显示区域之外
GO_Index.memberLeftView.setStyle({
left: "-100%",
transition: {
duration: 300
}
});
// 隐藏侧滑页面,setTimeout避免竞争资源
setTimeout(function() {
GO_Index.memberLeftView.hide();
}, 300);
},false);
});
实现效果如下图:
(更多精彩内容请访问DCloud官网(http://www.dcloud.io/))
收起阅读 »
webview层级的一个问题(设置zindex后ios上与安卓不一致)
效果:(菜单中间的那个图标比较大,需要凸显出来)
设置菜单层级和样式
mui.init({
subpages:[{
url:'nav.html',
id:'nav.html',
styles:{
zindex:"90",
width:"100%",
height:"70px",
bottom:"0px",//默认为0px,可不定义;
background:"transparent"
}
}]
});
var subpages = ['bf.html', 'straight.html', 'find.html', 'expert.html', 'person.html'];
var subpage_style = {
zindex:"20",
top: '0px',
bottom: '50px'
};
点击菜单切换的代码
for(var i=0;i<subpages.length;i++){
if(subpages[i]==targetTab){
plus.webview.show(subpages[i]);
plus.webview.show('nav.html');
}else{
plus.webview.hide(subpages[i]);
}
}
注意:这个plus.webview.show('nav.html');一定要加上去(原因:在ios上面,plus.webview.show()这个方法会默认把这个层显示在最上面)
效果:(菜单中间的那个图标比较大,需要凸显出来)
设置菜单层级和样式
mui.init({
subpages:[{
url:'nav.html',
id:'nav.html',
styles:{
zindex:"90",
width:"100%",
height:"70px",
bottom:"0px",//默认为0px,可不定义;
background:"transparent"
}
}]
});
var subpages = ['bf.html', 'straight.html', 'find.html', 'expert.html', 'person.html'];
var subpage_style = {
zindex:"20",
top: '0px',
bottom: '50px'
};
点击菜单切换的代码
for(var i=0;i<subpages.length;i++){
if(subpages[i]==targetTab){
plus.webview.show(subpages[i]);
plus.webview.show('nav.html');
}else{
plus.webview.hide(subpages[i]);
}
}
注意:这个plus.webview.show('nav.html');一定要加上去(原因:在ios上面,plus.webview.show()这个方法会默认把这个层显示在最上面)
收起阅读 »
Android监听电话呼入呼出
基本上是对着Native.js和百度的Android原生代码撸出来的。暂未测试多台机型。
(function($) {
var receiver, main, context, TelephonyManager;
$.plusReady(function() {
context = plus.android.importClass('android.content.Context'); //上下文
TelephonyManager = plus.android.importClass('android.telephony.TelephonyManager'); //通话管理
main = plus.android.runtimeMainActivity(); //获取activity
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: doReceive //实现onReceiver回调函数
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var Intent = plus.android.importClass('android.content.Intent');
var filter = new IntentFilter();
//filter.addAction(Intent.ACTION_AIRPLANE_MODE_CHANGED); //监听飞行模式
filter.addAction(TelephonyManager.ACTION_PHONE_STATE_CHANGED); //监听电话状态
main.registerReceiver(receiver, filter); //注册监听
});
function doReceive(context, intent) {
plus.android.importClass(intent);
var phoneNumber = intent.getStringExtra(TelephonyManager.EXTRA_INCOMING_NUMBER),
telephony = context.getSystemService(context.TELEPHONY_SERVICE),
state = telephony.getCallState();
switch(state) {
case TelephonyManager.CALL_STATE_RINGING:
console.log("[Broadcast]等待接电话=" + phoneNumber);
break;
case TelephonyManager.CALL_STATE_IDLE:
console.log("[Broadcast]电话挂断=" + phoneNumber);
break;
case TelephonyManager.CALL_STATE_OFFHOOK:
console.log("[Broadcast]通话中=" + phoneNumber);
break;
}
console.log(intent.getAction());
}
}(mui));
基本上是对着Native.js和百度的Android原生代码撸出来的。暂未测试多台机型。
(function($) {
var receiver, main, context, TelephonyManager;
$.plusReady(function() {
context = plus.android.importClass('android.content.Context'); //上下文
TelephonyManager = plus.android.importClass('android.telephony.TelephonyManager'); //通话管理
main = plus.android.runtimeMainActivity(); //获取activity
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: doReceive //实现onReceiver回调函数
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var Intent = plus.android.importClass('android.content.Intent');
var filter = new IntentFilter();
//filter.addAction(Intent.ACTION_AIRPLANE_MODE_CHANGED); //监听飞行模式
filter.addAction(TelephonyManager.ACTION_PHONE_STATE_CHANGED); //监听电话状态
main.registerReceiver(receiver, filter); //注册监听
});
function doReceive(context, intent) {
plus.android.importClass(intent);
var phoneNumber = intent.getStringExtra(TelephonyManager.EXTRA_INCOMING_NUMBER),
telephony = context.getSystemService(context.TELEPHONY_SERVICE),
state = telephony.getCallState();
switch(state) {
case TelephonyManager.CALL_STATE_RINGING:
console.log("[Broadcast]等待接电话=" + phoneNumber);
break;
case TelephonyManager.CALL_STATE_IDLE:
console.log("[Broadcast]电话挂断=" + phoneNumber);
break;
case TelephonyManager.CALL_STATE_OFFHOOK:
console.log("[Broadcast]通话中=" + phoneNumber);
break;
}
console.log(intent.getAction());
}
}(mui));
收起阅读 »

HBUILDER与支付宝的十宗罪
其实是支付宝和HB共同的坑
- 服务器公钥的配置,2个地方要配置,1是开放平台的 2是合作伙伴的,否则出现ATL65错误
- 不要使用最新网关https://openapi.alipay.com/gateway.do的参数配置,否则死的很惨,因为HB不支持。会出现ATL2075错误
- SIGN RSA私钥加密的字符串一定是key="value"&key="value"格式,这个不能错,否则签名有问题
- 私钥加密可以不用排序
- HB中提交的数据格式也一定是key="value"&key="value",否则出错
- 关于NOTIFY异步回传验证是否为支付宝,原HTTP地址不能用了,只能用HTTPS地址:https://mapi.alipay.com/gateway.do?service=notify_verify&partner=2088002396712354¬ify_id=RqPnCoPT3K9%252Fvwbh3I%252BFioE227%252BPfNMl8jwyZqMIiXQWxhOCmQ5MQO%252FWd93rvCB%252BaiGg
- NOTIFY SIGN验证要使用公钥
- 参数notify_data不在回传参数内,目前WAP网页支付还是支持
- 回传参数验证SIGN需要ksort排序,否则出错
- HB的支付提交错误返还的参数e.code没卵用
其实是支付宝和HB共同的坑
- 服务器公钥的配置,2个地方要配置,1是开放平台的 2是合作伙伴的,否则出现ATL65错误
- 不要使用最新网关https://openapi.alipay.com/gateway.do的参数配置,否则死的很惨,因为HB不支持。会出现ATL2075错误
- SIGN RSA私钥加密的字符串一定是key="value"&key="value"格式,这个不能错,否则签名有问题
- 私钥加密可以不用排序
- HB中提交的数据格式也一定是key="value"&key="value",否则出错
- 关于NOTIFY异步回传验证是否为支付宝,原HTTP地址不能用了,只能用HTTPS地址:https://mapi.alipay.com/gateway.do?service=notify_verify&partner=2088002396712354¬ify_id=RqPnCoPT3K9%252Fvwbh3I%252BFioE227%252BPfNMl8jwyZqMIiXQWxhOCmQ5MQO%252FWd93rvCB%252BaiGg
- NOTIFY SIGN验证要使用公钥
- 参数notify_data不在回传参数内,目前WAP网页支付还是支持
- 回传参数验证SIGN需要ksort排序,否则出错
- HB的支付提交错误返还的参数e.code没卵用

关于mui-slider组件动态生成之后无法滚动切换等问题
关于mui-slider组件动态生成之后无法滚动切换等问题
1.这个组件呢,里面具体的实现我不知道,但是动态生成造成部分功能缺失大概都是因为下面的原因
- 也就是说这个组件在浏览器检测到mui-slider类样式的时候就开始了初始化(纯属个人猜测)。
- 怎么解决呢?我们用这个滑动组件一般都是事先不知道有多少个,都是动态数据,这就是他们设计这个组件的时候的缺陷,这个必须改进
- 解决方案如下:
5.我们把整个slider组件的html都动态来生成也就是这样的
var temphtml = "<div id='slider' class='mui-slider mui-fullscreen reg_jacc'><div id='sliderSegmentedControl' class='mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted'><div id='username' class='mui-scroll'></div></div><div id='userInfo' class='mui-slider-group'></div></div>";
var temphtmlnode = zqnb.dom(temphtml);
document.getElementById("tempHtml").appendChild(temphtmlnode);
6.请不要纠结生成dom并且放入dom树的代码,只是告诉你们步骤,拼接html字符串、转dom、放入dom树。 - 这样我们的滑动组件有了,滑动组件里面的容器也有了,下面的工作就是获取容器dom填充数据了。
- 谢谢。
关于mui-slider组件动态生成之后无法滚动切换等问题
1.这个组件呢,里面具体的实现我不知道,但是动态生成造成部分功能缺失大概都是因为下面的原因
- 也就是说这个组件在浏览器检测到mui-slider类样式的时候就开始了初始化(纯属个人猜测)。
- 怎么解决呢?我们用这个滑动组件一般都是事先不知道有多少个,都是动态数据,这就是他们设计这个组件的时候的缺陷,这个必须改进
- 解决方案如下:
5.我们把整个slider组件的html都动态来生成也就是这样的
var temphtml = "<div id='slider' class='mui-slider mui-fullscreen reg_jacc'><div id='sliderSegmentedControl' class='mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted'><div id='username' class='mui-scroll'></div></div><div id='userInfo' class='mui-slider-group'></div></div>";
var temphtmlnode = zqnb.dom(temphtml);
document.getElementById("tempHtml").appendChild(temphtmlnode);
6.请不要纠结生成dom并且放入dom树的代码,只是告诉你们步骤,拼接html字符串、转dom、放入dom树。 - 这样我们的滑动组件有了,滑动组件里面的容器也有了,下面的工作就是获取容器dom填充数据了。
- 谢谢。

开源项目分享说明-DCloud产品技能分享大赛
分享的开源项目类型可以包括以下几种:
- 采用5+、MUI技术开发的App类项目(比如资讯、电商、金融、游戏等)。
- 基于5+、MUI的开源组件,建议大家分享可大幅节省开发时间的开源组件,目前推荐但不局限于以下几类:
-
跨平台适配:比如兼容5+ App、微信、QQ浏览器、UC浏览器的分享组件,兼容5+ App、微信、普通手机浏览器的支付组件;
-
基于mui现有组件实现扩展组件,比如:基于scroll控件实现左右滑动的专辑封面切换效果,基于图片轮播实现上下移动或渐隐渐现的轮播效果;
-
包含交互效果的模板,比如类似微信公众号消息列表的模板、朋友圈UI模板(包含图片预览、点赞、评论等交互功能)
参赛方式为进入HBuilder活动页面【点击HBuilder菜单帮助>>活动】点击立即参加然后提交项目链接,同时大家可以将已实现好的开源工程,在https://github.com/dcloudio/casecode提交pull Request,我们会关联展示。
分享的开源项目类型可以包括以下几种:
- 采用5+、MUI技术开发的App类项目(比如资讯、电商、金融、游戏等)。
- 基于5+、MUI的开源组件,建议大家分享可大幅节省开发时间的开源组件,目前推荐但不局限于以下几类:
-
跨平台适配:比如兼容5+ App、微信、QQ浏览器、UC浏览器的分享组件,兼容5+ App、微信、普通手机浏览器的支付组件;
-
基于mui现有组件实现扩展组件,比如:基于scroll控件实现左右滑动的专辑封面切换效果,基于图片轮播实现上下移动或渐隐渐现的轮播效果;
-
包含交互效果的模板,比如类似微信公众号消息列表的模板、朋友圈UI模板(包含图片预览、点赞、评论等交互功能)
参赛方式为进入HBuilder活动页面【点击HBuilder菜单帮助>>活动】点击立即参加然后提交项目链接,同时大家可以将已实现好的开源工程,在https://github.com/dcloudio/casecode提交pull Request,我们会关联展示。
收起阅读 »
解决plus.nativeObj.View页面切换,点击事件无效问题。
下方有附件可直接下载使用。
页面一
HTML代码
<a class="_button" onclick="go()">Hbuilder</a>
CSS代码
._button{
padding:8px 10px;
background:#f60;
margin:50px auto;
display: block;
width:120px;
text-align:center;
color:#FFFFFF;
border-radius: 3px;
}
JS代码
function plusReady(){
//创建底部图片
issue = new plus.nativeObj.Bitmap('bmp');
issue.load('images/footImg.png',function(){
console.log('图片加载完成!');
createView();
},function(e){
console.log('图片加载失败!'+JSON.stringify(e));
});
}
// 创建原生View控件
function createView(){
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
view.addEventListener("click",ViewClick, false);
}
//View点击事件
function ViewClick(){
alert('你点击的view');
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
/* 页面切换 */
function go(){
var subpage = mui.openWindow({
url:'list.html',
id:'list.html',
});
//页面转场的时候清除掉view。
subpage.addEventListener('loaded', function() {
subpage.show('slide-in-right', 200, function() {
view.clear();
});
});
}
//监听list返回
window.addEventListener('_title',function(){
//一监听到就可以创建View了,但是View的点击没用(事件应该是绑上了,用createView()的话会发现点击的时候会弹窗两次),应该是位置的问题吧。
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
// createView(); 这样写的话点击会被执行两次。
//所以等待窗体动画到位在绑定事件
setTimeout(function(){
view.addEventListener("click",ViewClick, false);
},400);
});
页面二
JS代码
$('._back').on('tap',function(){
mui.init({
beforeback: function(){
// var viewPage = plus.webview.getWebviewById('view.html'); //如果不是首页面就用这个获取指定ID,否则用下面的获取首页窗体;
var viewPage = plus.webview.getLaunchWebview();
mui.fire(viewPage,'_title',{/* 这里可以传值 */});
return true;
}
});
mui.back();
})
下方有附件可直接下载使用。
页面一
HTML代码
<a class="_button" onclick="go()">Hbuilder</a>
CSS代码
._button{
padding:8px 10px;
background:#f60;
margin:50px auto;
display: block;
width:120px;
text-align:center;
color:#FFFFFF;
border-radius: 3px;
}
JS代码
function plusReady(){
//创建底部图片
issue = new plus.nativeObj.Bitmap('bmp');
issue.load('images/footImg.png',function(){
console.log('图片加载完成!');
createView();
},function(e){
console.log('图片加载失败!'+JSON.stringify(e));
});
}
// 创建原生View控件
function createView(){
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
view.addEventListener("click",ViewClick, false);
}
//View点击事件
function ViewClick(){
alert('你点击的view');
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
/* 页面切换 */
function go(){
var subpage = mui.openWindow({
url:'list.html',
id:'list.html',
});
//页面转场的时候清除掉view。
subpage.addEventListener('loaded', function() {
subpage.show('slide-in-right', 200, function() {
view.clear();
});
});
}
//监听list返回
window.addEventListener('_title',function(){
//一监听到就可以创建View了,但是View的点击没用(事件应该是绑上了,用createView()的话会发现点击的时候会弹窗两次),应该是位置的问题吧。
view = new plus.nativeObj.View('FootImg',{top:'90%',left:'43%',height:'55px',width:'55px',background:'#f60'});
view.drawBitmap( issue, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
view.show();
// createView(); 这样写的话点击会被执行两次。
//所以等待窗体动画到位在绑定事件
setTimeout(function(){
view.addEventListener("click",ViewClick, false);
},400);
});
页面二
JS代码
$('._back').on('tap',function(){
mui.init({
beforeback: function(){
// var viewPage = plus.webview.getWebviewById('view.html'); //如果不是首页面就用这个获取指定ID,否则用下面的获取首页窗体;
var viewPage = plus.webview.getLaunchWebview();
mui.fire(viewPage,'_title',{/* 这里可以传值 */});
return true;
}
});
mui.back();
})
收起阅读 »

几行代码轻松实现瀑布流显示。
实现思路:创建左右两个容器,在数据导入的时候获取两个容器的高度,把即将要导入的数据,导进高度低的一个容器即可。
HTML代码
<body style="background-color: #f3f3f3;">
<!-- 商品列表 -->
<div class="twoRankedBox">
<ul class="BoxLeft">
</ul>
<ul class="BoxRight">
</ul>
</div>
</body>
CSS代码
*{
padding:0px;
margin:0px;
list-style: none;
font-style:normal;
font-family: arial;
font-family: Microsoft YaHei,arial;
}
.twoRankedBox{
margin:6px 8px;
overflow: hidden;
padding-bottom:25px;
}
.twoRankedBox ul{
width:49%;
float: left;
}
.twoRankedBox ul:last-child{
margin-left:2%;
}
.twoRankedBox ul li{
padding:5px;
margin-bottom:6px;
padding-bottom:8px;
background-color: #FFFFFF;
}
.twoRankedBox ul li p:first-child{
padding-top:0px;
}
.twoRankedBox ul li p{
padding-top:4px;
}
.product_picture img{
display: block;
width:100%;
}
.product_np{
overflow: hidden;
line-height:20px;
}
.product_np a{
display: block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.product_np a:first-child{
font-size:0.9em;
color:#58b7e3;
width:65%;
float: left;
}
.product_np a:last-child{
font-size:0.8em;
color:#f00;
float: right;
width:35%;
text-align: right;
}
.product_ie{
font-size:0.8em;
color:#777;
}
JS代码(需要JQ,因为获取高度是用JQ写的。可以自行修改)
//模拟JSON数据
var json = {
data:[
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_01.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_02.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_03.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_04.jpg'},
{name:'格纹小短裙',price:'88',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_05.jpg'},
{name:'复古旗袍',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_06.jpg'},
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_07.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_08.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_09.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_10.jpg'},
{name:'格纹小短裙',price:'118',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_11.jpg'}
]
}
//模拟数据导入
for(var i=0;i<json.data.length;i++){
var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'
+'<p class="product_np"><a>'+json.data[i].name+'</a><a>¥'+json.data[i].price+'</a></p>'
+'<p class="product_ie">'+json.data[i].details+'</p></li>'
if($('.BoxLeft').height() < $('.BoxRight').height()){
$('.BoxLeft').append(chtml);
}else{
$('.BoxRight').append(chtml);
}
}
实现思路:创建左右两个容器,在数据导入的时候获取两个容器的高度,把即将要导入的数据,导进高度低的一个容器即可。
HTML代码
<body style="background-color: #f3f3f3;">
<!-- 商品列表 -->
<div class="twoRankedBox">
<ul class="BoxLeft">
</ul>
<ul class="BoxRight">
</ul>
</div>
</body>
CSS代码
*{
padding:0px;
margin:0px;
list-style: none;
font-style:normal;
font-family: arial;
font-family: Microsoft YaHei,arial;
}
.twoRankedBox{
margin:6px 8px;
overflow: hidden;
padding-bottom:25px;
}
.twoRankedBox ul{
width:49%;
float: left;
}
.twoRankedBox ul:last-child{
margin-left:2%;
}
.twoRankedBox ul li{
padding:5px;
margin-bottom:6px;
padding-bottom:8px;
background-color: #FFFFFF;
}
.twoRankedBox ul li p:first-child{
padding-top:0px;
}
.twoRankedBox ul li p{
padding-top:4px;
}
.product_picture img{
display: block;
width:100%;
}
.product_np{
overflow: hidden;
line-height:20px;
}
.product_np a{
display: block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.product_np a:first-child{
font-size:0.9em;
color:#58b7e3;
width:65%;
float: left;
}
.product_np a:last-child{
font-size:0.8em;
color:#f00;
float: right;
width:35%;
text-align: right;
}
.product_ie{
font-size:0.8em;
color:#777;
}
JS代码(需要JQ,因为获取高度是用JQ写的。可以自行修改)
//模拟JSON数据
var json = {
data:[
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_01.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_02.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_03.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_04.jpg'},
{name:'格纹小短裙',price:'88',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_05.jpg'},
{name:'复古旗袍',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_06.jpg'},
{name:'花瓣小小裙花瓣',price:'128',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_07.jpg'},
{name:'时尚牛仔短裤',price:'298',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_08.jpg'},
{name:'白色婚纱',price:'668',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_09.jpg'},
{name:'绿色防晒衣',price:'218',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_10.jpg'},
{name:'格纹小短裙',price:'118',details:'质量超好特别的舒适,夏天首选。',src:'images/temporary/img_11.jpg'}
]
}
//模拟数据导入
for(var i=0;i<json.data.length;i++){
var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'
+'<p class="product_np"><a>'+json.data[i].name+'</a><a>¥'+json.data[i].price+'</a></p>'
+'<p class="product_ie">'+json.data[i].details+'</p></li>'
if($('.BoxLeft').height() < $('.BoxRight').height()){
$('.BoxLeft').append(chtml);
}else{
$('.BoxRight').append(chtml);
}
}
收起阅读 »

通过Native.js来获取手机电量
最近在做一款APP,需要获取手机电量,折腾了好长时间,终于搞定,把代码分享出来,希望能帮助到一些需要这个功能的朋友。
好了,废话不多说,直接上代码
安卓手机代码
//注意,安卓需要配置下manifest.json文件,打开后,进入模块权限配置,在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass('android.content.Intent');
var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
var action = intent.getAction();
if (action == Intent.ACTION_BATTERY_CHANGED) {
var level = intent.getIntExtra("level", 0); //电量
var voltage = intent.getIntExtra("voltage", 0); //电池电压
var temperature = intent.getIntExtra("temperature", 0); //电池温度
//如需获取别的,在这里继续写,此代码只提供获取电量
console.log(level)
}
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
main.registerReceiver(recevier, filter);
IOS代码
var UIDevice = plus.ios.import("UIDevice");
var dev = UIDevice.currentDevice();
if (!dev.isBatteryMonitoringEnabled()) {
dev.setBatteryMonitoringEnabled(true);
}
var level =dev.batteryLevel();
最近在做一款APP,需要获取手机电量,折腾了好长时间,终于搞定,把代码分享出来,希望能帮助到一些需要这个功能的朋友。
好了,废话不多说,直接上代码
安卓手机代码
//注意,安卓需要配置下manifest.json文件,打开后,进入模块权限配置,在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass('android.content.Intent');
var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
var action = intent.getAction();
if (action == Intent.ACTION_BATTERY_CHANGED) {
var level = intent.getIntExtra("level", 0); //电量
var voltage = intent.getIntExtra("voltage", 0); //电池电压
var temperature = intent.getIntExtra("temperature", 0); //电池温度
//如需获取别的,在这里继续写,此代码只提供获取电量
console.log(level)
}
}
});
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
main.registerReceiver(recevier, filter);
IOS代码
var UIDevice = plus.ios.import("UIDevice");
var dev = UIDevice.currentDevice();
if (!dev.isBatteryMonitoringEnabled()) {
dev.setBatteryMonitoringEnabled(true);
}
var level =dev.batteryLevel();
收起阅读 »