专栏首页WebDeveloper移动端滑动切换

移动端滑动切换

预览

scss样式

@import 'common';//初始样式,可以不需要(这是我项目需要)

/*body默认铺满整个屏幕*/
body{
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
#nav{
    height: 2.8125rem;
    background-color: white;
    color: $gray;
    @include flex(center, center);
    .sub-item{
        text-align: center;
        -webkit-flex: 1;
        flex: 1;
        line-height: 2.8125rem;
        width: 100%;
        height: 100%;
        border-bottom: none;

    }
}

.selected{
    border-bottom: 0.0625rem solid $textcolor!important;
    color: $textcolor!important;
}

#main{
    min-height: 100%;
}

html

额外了解: swiper插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>投资计划</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/investplan.css">
</head>
<body>
    <nav class="text-title1" id="nav">
        <div class="sub-item selected" data-type="new-peo" data-num="0">回款中</div>
        <div class="sub-item" data-type="earning" data-num="1">已回款</div>
    </nav>
    <div class="swiper-container" id="main">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                1
            </div>
            <div class="swiper-slide">
                2
            </div>
        </div>
    </div>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/classify.js"></script>
</body>
</html>

classify.js自定义的js

$(function(){
    /*滑动切换*/
    var swiper = new Swiper('.swiper-container', {

        onSlideNextStart: function(swiper){
             $('.selected').next().addClass('selected');
             $('.selected').first().removeClass('selected');
        },
        onSlidePrevStart: function(swiper){
            $('.selected').prev().addClass('selected');     
            $('.selected').last().removeClass('selected');
         }

    });
    /*点击菜单切换*/
    $('#nav .sub-item').click(function(){
        
        $('.selected').removeClass('selected');
        $(this).addClass('selected');

        var num = $(this).data('num');
        swiper.slideTo(num, 500, false);
    });
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这种div高度自适应确定你知道吗?

    _simple
  • golang-protobuf使用

    Protocol buffers是一个灵活的、高效的、自动化的用于对结构化数据进行序列化的协议,与XML、json相比,Protocol buffers序列化后...

    _simple
  • 遇到fabric的坑

    本次启动网络是使用fabric-sample(release-1.0)项目,而且工具已经安装成功 1 出现Attempting to Query PEER0 ...

    _simple
  • java语言反射的概述以及三种获取字节码文件对应的Class类型的对象的方式

    反射的概述:   JAVA反射机制是在运行状态中,   对于任意一个类,都能够知道这个类的所有属性和方法(动态获取的信息);   对于任意一个对象,...

    黑泽君
  • bootstrap tab 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • CSS团队协作规范

    手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让HTML一开始载入,使用最少的效能快速载入网页。当开始制作桌面版时,只会少许跑版,做...

    猿哥
  • 从零开始学 Web 之 移动Web(九)微金所案例

    相关源代码已放置github:https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip

    Daotin
  • PHPCMS V9 添加二级导航

    今天看了看phpcms 写到二级导航时发现点问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同。

    码缘
  • ABP入门系列(5)——展现层实现增删改查

    这一章节将通过完善Controller、View、ViewModel,来实现展现层的增删改查。最终实现效果如下图: ? 一、定义Controller ABP对A...

    圣杰
  • 这种div高度自适应确定你知道吗?

    _simple

扫码关注云+社区

领取腾讯云代金券