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

作者：教程字体：[增加减小] 来源：互联网时间：2017-05-31

本文主要包含mui 隐藏div,mui选项卡,mui底部选项卡,mui tab选项卡切换,mui顶部选项卡等相关知识,教程希望在学习及工作中可以帮助到您

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

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

完美解决~
具体代码如下

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>B5教程网-www.bcty365.com</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">

  &

您可能想查找下面的文章:

2017-05-31HBuilder mui 如何判断网络是否连接
2017-05-31Hbuilder MUI积分兑换页面
2017-05-31HBuilder MUI 关于百度定位
2017-05-31HBuilder MUI 引导页制作
2017-05-31MUI初始化滚动区域
2017-05-31html5实现ios长按图标后进入图标排序及删除功能的效果
2017-05-31HBuilder mui 自定义事件
2017-05-31mui数百精选案例分享
2017-05-31采用了BeeCloud作为支付解决方案还需要配置plus.payment吗？
2017-05-31mui 图片实现瀑布流显示

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

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容