菜鸡
菜鸡
  • 发布:2016-10-31 16:22
  • 更新:2016-10-31 16:22
  • 阅读:14004

mui切换div模式选项卡横向平移特效(借用mui官方图片轮播特效实现)

分类:MUI

开始使用slider segmented control和mui control content之间的交互写完页面后发现,
切换选项卡的时候没有平移特效,
而设计稿上面切换选项卡是有那个特效的,
so,只好去官方demo翻找,
发现似乎div模式的选项卡切换的时候都没有平移特效,
后来看到官方demo里面的选项卡是可以滑动进行切换的,
心想这不就是图片轮播差不多吗,
于是乎,果断把选项卡切换按钮上的href去掉,添加上data-index属性
监听按钮上的tap事件,添加图片轮播插件的gotoItem方法
js
完美解决~
具体代码如下

<!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>  

好了源码在附件里~
对了,再附上个视频
视频

10 关注 分享
37048185@qq.com 125457546@qq.com DCloud_heavensoft 1260860752@qq.com smartapple 710754031@qq.com 1399370112@qq.com 1185754856@qq.com 2222 君青阳

要回复文章请先登录注册

309731409@qq.com

309731409@qq.com

回复 309731409@qq.com: 例如新闻资讯的App 都在一个页面吗。
2017-11-19 01:23
309731409@qq.com

309731409@qq.com

做的很不错。但是有个问题。如果全部写在一个页面里面。如何处理加载的数据。
2017-11-19 01:22
2561033753@qq.com

2561033753@qq.com

回复 项目目录: 同问........
2017-08-08 18:04
冰凌桦

冰凌桦

楼主,在这个基础上添加下拉刷新和上拉加载,选项卡怎么点击不了呢
2017-05-21 16:44
1399370112@qq.com

1399370112@qq.com

楼主写的可好了,,,,美中不足的是。。切换的时候下面没有跟着滑动的线
2017-02-28 10:47
项目目录

项目目录

楼主,发现一个小问题,我一直解决不了,求助:在你的页面里,我再添加一个图片轮播后,发现,滑动页面后,选项卡不会跟着动,如何解决这个问题,按钮我使用了ID来区分了2个mui-slider,一个是页面的mui-slider,一个是动画的mui-slider,请教如何解决这个问题?
2016-12-15 21:48
1260860752@qq.com

1260860752@qq.com

感谢分享
2016-12-15 10:45