解决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();
iframe里嵌入另一个 hhtml input不能输入内容
<form name="form1" id="form1" action="" method="post" >
<div class="mui-input-row mui-search mui-search-xie">
<input type="search" class="mui-input-clear" placeholder="请输入产品" id="searchInput">
</div>
</form>
页面见附件，代码如下，该页面是放在另一个页面的iframe中的 ，单独访问时可以输入的
<form name="form1" id="form1" action="" method="post" >
<div class="mui-input-row mui-search mui-search-xie">
<input type="search" class="mui-input-clear" placeholder="请输入产品" id="searchInput">
</div>
</form>
页面见附件，代码如下，该页面是放在另一个页面的iframe中的 ，单独访问时可以输入的
收起阅读 »
udp的发送与接收
需要注意的是：需要用Unicode编码方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
var udp;
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
udp=new UDP();
udp.Listen(5412,function(data){
alert("收到:" data);
});
});
function senddata(){
udp.Send("192.168.1.197",12345,"a地");
}
function UDP(){
var DatagramPacket=plus.android.importClass("java.net.DatagramPacket");
var DatagramSocket=plus.android.importClass("java.net.DatagramSocket");
var InetAddress=plus.android.importClass("java.net.InetAddress");
var Addr=new InetAddress();
var sock;
var _RUNNING=true;
this.Listen=function(port,recvcallback){
sock=new DatagramSocket(port);
var buf=[];
buf=Str2Byte("12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890");
//buf[1024]=0;
sock.setSoTimeout(50);
var recvtime=setTimeout(recv(recvcallback),"10");
function recv(callback) {
var pack=new DatagramPacket(buf,buf.length);
try{
sock.receive(pack);
if (pack.getLength()>0) {
var data=Byte2Str(pack.getData(),pack.getLength());
callback(data);
clearTimeout(recvtime);
}
}catch(e){
}
if (_RUNNING) recvtime=setTimeout(recv(callback),"10");
}
};
this.Close=function() {
alert("Socket Close");
sock.close();
_RUNNING=false;
};
this.Send=function(remote,port,data) {
var buf=[];
buf=Str2Byte(data);
var pack=new DatagramPacket(buf,buf.length,Addr.getByName(remote),port);
sock.send(pack);
};
} function Byte2Str(arr,length){
var str="";
var d;
for(var i=0;i<length;i =2) {
d=arr[i];
d=(arr[i 1]<<8) d;
var tmp=String.fromCharCode(d);
str =tmp;
}
return str;
}
function Str2Byte(str){
var ch,c2,st,re=[];
for(var i=0;i<str.length;i ) {
ch=str.charCodeAt(i);
st=[];
do {
c2=ch需要注意的是：需要用Unicode编码方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
var udp;
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
udp=new UDP();
udp.Listen(5412,function(data){
alert("收到:" data);
});
});
function senddata(){
udp.Send("192.168.1.197",12345,"a地");
}
function UDP(){
var DatagramPacket=plus.android.importClass("java.net.DatagramPacket");
var DatagramSocket=plus.android.importClass("java.net.DatagramSocket");
var InetAddress=plus.android.importClass("java.net.InetAddress");
var Addr=new InetAddress();
var sock;
var _RUNNING=true;
this.Listen=function(port,recvcallback){
sock=new DatagramSocket(port);
var buf=[];
buf=Str2Byte("12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890");
//buf[1024]=0;
sock.setSoTimeout(50);
var recvtime=setTimeout(recv(recvcallback),"10");
function recv(callback) {
var pack=new DatagramPacket(buf,buf.length);
try{
sock.receive(pack);
if (pack.getLength()>0) {
var data=Byte2Str(pack.getData(),pack.getLength());
callback(data);
clearTimeout(recvtime);
}
}catch(e){
}
if (_RUNNING) recvtime=setTimeout(recv(callback),"10");
}
};
this.Close=function() {
alert("Socket Close");
sock.close();
_RUNNING=false;
};
this.Send=function(remote,port,data) {
var buf=[];
buf=Str2Byte(data);
var pack=new DatagramPacket(buf,buf.length,Addr.getByName(remote),port);
sock.send(pack);
};
} function Byte2Str(arr,length){
var str="";
var d;
for(var i=0;i<length;i =2) {
d=arr[i];
d=(arr[i 1]<<8) d;
var tmp=String.fromCharCode(d);
str =tmp;
}
return str;
}
function Str2Byte(str){
var ch,c2,st,re=[];
for(var i=0;i<str.length;i ) {
ch=str.charCodeAt(i);
st=[];
do {
c2=ch
mui切换div模式选项卡横向平移特效(借用mui官方图片轮播特效实现)
开始使用slider segmented control和mui control content之间的交互写完页面后发现,
切换选项卡的时候没有平移特效,
而设计稿上面切换选项卡是有那个特效的,
so,只好去官方demo翻找,
发现似乎div模式的选项卡切换的时候都没有平移特效,
后来看到官方demo里面的选项卡是可以滑动进行切换的,
心想这不就是图片轮播差不多吗,
于是乎,果断把选项卡切换按钮上的href去掉,添加上data-index属性
监听按钮上的tap事件,添加图片轮播插件的gotoItem方法
完美解决~
具体代码如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="http://www.dcloud.io/hellomui/css/mui.min.css" rel="stylesheet" />
<script src="http://www.dcloud.io/hellomui/js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<style type="text/css">
body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;}
div.mui-content{background-color: #F1E9DC;}
p{margin-bottom: 0px;}
.mui-slider-indicator.mui-segmented-control{
padding: 5px 10px;
background: #FFF;
}
.mui-segmented-control.mui-scroll-wrapper{
height: 45px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
width: 100px;
border: 1px solid #ccc;
box-shadow:0 0 5px #aaa;
line-height: 30px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active{
color: #fff;
background-color: #78909C;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group{
top: 45px;
}
.mui-slider-group .mui-scroll-wrapper{
padding-top: 5px;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" data-index="0">卡片</a>
<a class="mui-control-item" data-index="1">图表</a>
<a class="mui-control-item" data-index="2">其他</a>
<a class="mui-control-item" data-index="3">其他</a>
<a class="mui-control-item" data-index="4">其他</a>
<a class="mui-control-item" data-index="5">其他</a>
</div>
</div>
<div class="mui-slider-group">
<div class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
</div>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
<div class="mui-card-footer">页脚</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>Posted on January 18, 2016</p>
<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
</div>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<div class="mui-card-content" >
<img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Comment</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
<div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
<div class="mui-card-footer">页脚</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<div class="mui-card-content" >
<img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Comment</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.ready(function() {
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true,
deceleration:mui.os.ios?0.003:0.0009
});
mui('.mui-scroll').on('tap','.mui-control-item:not(.mui-active)',function(){
mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
});
});
</script>
</body>
</html>好了源码在附件里~
对了,再附上个视频
视频
开始使用slider segmented control和mui control content之间的交互写完页面后发现,
切换选项卡的时候没有平移特效,
而设计稿上面切换选项卡是有那个特效的,
so,只好去官方demo翻找,
发现似乎div模式的选项卡切换的时候都没有平移特效,
后来看到官方demo里面的选项卡是可以滑动进行切换的,
心想这不就是图片轮播差不多吗,
于是乎,果断把选项卡切换按钮上的href去掉,添加上data-index属性
监听按钮上的tap事件,添加图片轮播插件的gotoItem方法
完美解决~
具体代码如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="http://www.dcloud.io/hellomui/css/mui.min.css" rel="stylesheet" />
<script src="http://www.dcloud.io/hellomui/js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<style type="text/css">
body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;}
div.mui-content{background-color: #F1E9DC;}
p{margin-bottom: 0px;}
.mui-slider-indicator.mui-segmented-control{
padding: 5px 10px;
background: #FFF;
}
.mui-segmented-control.mui-scroll-wrapper{
height: 45px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
width: 100px;
border: 1px solid #ccc;
box-shadow:0 0 5px #aaa;
line-height: 30px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active{
color: #fff;
background-color: #78909C;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group{
top: 45px;
}
.mui-slider-group .mui-scroll-wrapper{
padding-top: 5px;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" data-index="0">卡片</a>
<a class="mui-control-item" data-index="1">图表</a>
<a class="mui-control-item" data-index="2">其他</a>
<a class="mui-control-item" data-index="3">其他</a>
<a class="mui-control-item" data-index="4">其他</a>
<a class="mui-control-item" data-index="5">其他</a>
</div>
</div>
<div class="mui-slider-group">
<div class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-card">
<div class="mui-card-content">
<div class="mui-card-content-inner">
这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
</div>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
<div class="mui-card-footer">页脚</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://www.dcloud.io/hellomui/images/cbd.jpg)"></div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>Posted on January 18, 2016</p>
<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
</div>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<div class="mui-card-content" >
<img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Comment</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="http://www.dcloud.io/hellomui/images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</li>
</ul>
<div class="mui-card">
<div class="mui-card-header">页眉</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
</div>
</div>
<div class="mui-card-footer">页脚</div>
</div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="http://www.dcloud.io/hellomui/images/logo.png" style="width:34px">
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30</p>
</div>
</div>
<div class="mui-card-content" >
<img src="http://www.dcloud.io/hellomui/images/yuantiao.jpg" alt="" width="100%"/>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">Like</a>
<a class="mui-card-link">Comment</a>
<a class="mui-card-link">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
<div class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
自行脑补页面
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.ready(function() {
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true,
deceleration:mui.os.ios?0.003:0.0009
});
mui('.mui-scroll').on('tap','.mui-control-item:not(.mui-active)',function(){
mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
});
});
</script>
</body>
</html>好了源码在附件里~
对了,再附上个视频
视频
HTML5中国产业联盟正式挂靠到工信部下
HTML5中国产业联盟正式挂靠到工信部下
2016年10月28日，在国家会议中心，工信部召开的《2016移动智能终端峰会》上，举办了HTML5中国产业联盟挂靠工信部信通院标准所的挂靠仪式。
工信部标准所孙明俊主任、DCloud CEO 王安、360浏览器总经理 孔祥政、华为消费者BG用户经营开发部部长 叶文武、HTML5梦工场创始人 田爱娜、联盟早期发起人 现任美团•点评技术学院院长 刘江，一起为联盟挂靠仪式进行揭幕。
HTML5中国产业联盟之前是W3C中国指导下，由DCloud和CSDN作为发起单位、由十几家HTML5从业单位组成的组织，为HTML5开发者提供全方位的开发、发行、培训、外包、宣传、融资服务，其制定的HTML5+标准规范，是对HTML5的一种扩展，扩展后的HTML5可以达到原生的功能和体验。
并入工信部后，联盟将拥有更多资源，同时也承载更多产业责任，需要为HTML5生态在中国的发展做更多的努力。
近期多家渠道发行单位加入联盟，宣布支持HTML5+标准，同时DCloud流应用获得了工信部颁发的墨提斯奖，表彰DCloud在HTML5领域做出的突破性贡献。
在大会上，DCloud CEO王安做了题为《动态App将成为移动互联网下半场的重要增长动力》的演讲。演讲速记
在大会的圆桌论坛上，W3C中国区经理李安琪、开发者服务代表DCloud CEO王安、浏览器厂商代表360浏览器总经理孔祥正、手机厂商代表华为用户经营开发部部长叶文武、开发者代表美团技术学院院长刘江、火速移动CEO 赵九州等多位嘉宾站在不同的角度分析了微信小程序对产业的影响，大家认为封闭的微信小程序有机会也有威胁，一致鼓励HTML5中国产业联盟做大做强开放标准。
目前已经有几十万开发者在使用HTML5+技术，包括京东、大众点评、网易有道、唯品会、携程等众多一线开发商
同时已经有数亿手机设备安装有HTML5+引擎，用户可以通过下面的视频体验。
360手机浏览器8.0运行HTML5+应用的效果
HTML5中国产业联盟正式挂靠到工信部下
2016年10月28日，在国家会议中心，工信部召开的《2016移动智能终端峰会》上，举办了HTML5中国产业联盟挂靠工信部信通院标准所的挂靠仪式。
工信部标准所孙明俊主任、DCloud CEO 王安、360浏览器总经理 孔祥政、华为消费者BG用户经营开发部部长 叶文武、HTML5梦工场创始人 田爱娜、联盟早期发起人 现任美团•点评技术学院院长 刘江，一起为联盟挂靠仪式进行揭幕。
HTML5中国产业联盟之前是W3C中国指导下，由DCloud和CSDN作为发起单位、由十几家HTML5从业单位组成的组织，为HTML5开发者提供全方位的开发、发行、培训、外包、宣传、融资服务，其制定的HTML5+标准规范，是对HTML5的一种扩展，扩展后的HTML5可以达到原生的功能和体验。
并入工信部后，联盟将拥有更多资源，同时也承载更多产业责任，需要为HTML5生态在中国的发展做更多的努力。
近期多家渠道发行单位加入联盟，宣布支持HTML5+标准，同时DCloud流应用获得了工信部颁发的墨提斯奖，表彰DCloud在HTML5领域做出的突破性贡献。
在大会上，DCloud CEO王安做了题为《动态App将成为移动互联网下半场的重要增长动力》的演讲。演讲速记
在大会的圆桌论坛上，W3C中国区经理李安琪、开发者服务代表DCloud CEO王安、浏览器厂商代表360浏览器总经理孔祥正、手机厂商代表华为用户经营开发部部长叶文武、开发者代表美团技术学院院长刘江、火速移动CEO 赵九州等多位嘉宾站在不同的角度分析了微信小程序对产业的影响，大家认为封闭的微信小程序有机会也有威胁，一致鼓励HTML5中国产业联盟做大做强开放标准。
目前已经有几十万开发者在使用HTML5+技术，包括京东、大众点评、网易有道、唯品会、携程等众多一线开发商
同时已经有数亿手机设备安装有HTML5+引擎，用户可以通过下面的视频体验。
360手机浏览器8.0运行HTML5+应用的效果
到哪里学习MUI、Dcloud、Hbuilder最全最权威的跨平台app开发技术？
