开始使用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>好了源码在附件里~
对了,再附上个视频
视频
