移动端滑动切换

预览

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 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Web 前端常用专有名词的正确拼写

本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

16220
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

25850
来自专栏Create Sun

【.net+jquery】绘制自定义表单(含源码)

前言   两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激...

1.3K80
来自专栏前端说吧

JS-【同页面多次调用】轮播特效封装-json传多个参数

44250
来自专栏非著名程序员

基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解

友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 看完了这个组件的名字 KeyboardAvoi...

50250
来自专栏Golang语言社区

Golang语言RPC Authorization进行简单ip安全验证的方法

前言:写网络服务,总要考虑安全机制,对ip和网段进行判断是最简单的一个验证机制。之后想做一个类似注册式的安全验证机制,既可以减少配置文件的麻烦,又可以很好的进行...

30150
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

791130
来自专栏GIS讲堂

共享个地图控件的样式

源代码下载地址:http://download.csdn.net/detail/gisshixisheng/9008937

20320
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

24460
来自专栏小狼的世界

基于Vue、Bootstrap的Tab形式的进度展示

最近基于Vue、Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些。在...

35020

扫码关注云+社区

领取腾讯云代金券