mui切换div模式选项卡横向平移特效(借用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>

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

7 分享
37048185@qq.com 125457546@qq.com DCloud_heavensoft 1260860752@qq.com smartapple 710754031@qq.com 1399370112@qq.com
1260860752@qq.com

1260860752@qq.com

感谢分享
0 赞 2016-12-15 10:45
项目目录

项目目录

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

1399370112@qq.com

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

要回复文章请先登录注册