Zepto：实现移动端tab选项

知识点

移动端适口

<meta name="viewport" content="width=device-width, user-scalable=no">

新闻div占200% 每一个都占父标签50% 左浮
Zepto中swip实现滑动、tap实现点击
index()获取下标

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no"><title></title><style>*{margin: 0;padding:0;border:none;list-style:none;touch-action: none;box-sizing: border-box;}.box{position: relative;}.head{ width: 100%; height: 40px; background-color: #ccc;}.head li{width: 50%; height: 100%; float: left; display: flex;justify-content: center; align-items: center;font-size: 18px;font-weight: bold;}.head li.current{color: #e9232c;}.line{width: 50%;height: 3px;background-color: #e9232c;position: absolute;left: 0;top: 37px;}.list{width: 200%;overflow: hidden;}.list>div{width: 50%;float: left;}.list>div ul{padding: 10px;}.list>div ul li{height: 36px;line-height: 36px;border-bottom: 1px solid #000;}.more{width: 100%;text-decoration: none;color: #000;display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><div class="box"><ul class="head"><li class="current">新闻</li><li>科技</li></ul><span class="line"></span><div class="list"><div class="list1"><ul><li>新闻内容新闻内容新闻内容</li><li>新闻内容新闻内容新闻内容</li><li>新闻内容新闻内容新闻内容</li><li>新闻内容新闻内容新闻内容</li><li>新闻内容新闻内容新闻内容</li></ul><a href="#" class="more">查看更多...</a></div><div class="list2"><ul><li>科技内容科技内容科技内容</li><li>科技内容科技内容科技内容</li><li>科技内容科技内容科技内容</li><li>科技内容科技内容科技内容</li><li>科技内容科技内容科技内容</li></ul><a href="#" class="more">查看更多...</a></div></div></div><script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>$(function () {// 1. 监听点击事件$('.head li').tap(function () {// 1.1 获取点击的索引var index = $(this).index();// 1.2 改变选中样式$(this).addClass('current').siblings().removeClass('current');// 1.3 处理线条的样式$('.line').css({transform: 'translateX(' + index * 100 +'%)',transition: 'all 0.25s linear'});// 1.4 处理列表$('.list').css({transform: 'translateX(' + -index * 50 +'%)',transition: 'all 0.25s linear'})});// 2. 监听左滑动和右滑动var $list = $('.list');$list.swipeLeft(function () {dealWithSwipe(1);});$list.swipeRight(function () {dealWithSwipe(0);});/***  统一处理左右滑动* @param index 索引*/function dealWithSwipe(index) {// 1.2 改变选中样式$('.head li').eq(index).addClass('current').siblings().removeClass('current');// 1.3 处理线条的样式$('.line').css({transform: 'translateX(' + index * 100 +'%)',transition: 'all 0.25s linear'});// 1.4 处理列表$('.list').css({transform: 'translateX(' + -index * 50 +'%)',transition: 'all 0.25s linear'})}});
</script>
</body>
</html>

运行结果

Zepto：实现移动端tab选项相关推荐

boost::container实现双端队列选项的测试程序
boost::container模块实现双端队列选项的测试程序实现功能 C++实现代码实现功能 boost::container模块实现双端队列选项的测试程序 C++实现代码 #include & ...
Android之TabLayout+ViewPager2+FragmentStateAdapter实现带数字变化的TAB选项
1 问题 TabLayout+ViewPager2实现带数字变化的TAB选项,然后左边滑动或者点击上面的Tab切换fragment不能刷新 2 结果爆照 3 代码实现 layer_tab_indica ...
DWZ (JUI) 教程修正 Tab 选项卡多次加载
DWZ (JUI) 教程修正 Tab 选项卡多次加载 dwz 1.4.3 选项卡使用j-ajax 动态加载时,没每次切换的时候都会进行加载,大多数情况不是很实用,做了一下简单的修改,对于页面只加 ...
Python数据可视化 Pyecharts 制作 Tab 选项卡多图控制
Python3 的 Pyecharts 制作 Tab(选项卡多图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 标准选项卡多图 Tab:选项卡多 ...
html5 手机端 select,适配性强的移动端select选项框
需求来源原生的select有很多样式不能随意改动,比如不能设置居中不生效,select框长度不能根据内容自适应等.而且在ios端和安卓端显示的样式不统一.所以为了解决以上问题,基于swiper对se ...
移动端tab切换时下划线的滑动效果
本篇会放置多种下划线滑动效果,一篇一篇增加,更新中 1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html> ...
Android unity3d Tab选项
//工具栏选择按钮的ID private var select : int; //工具栏显示按钮的字符串 private var barResource : String[]; //选择按钮是否被按下 ...
移动端开发框架Zepto.js
一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
CSS3---移动端苹果安卓适配
常见苹果适配问题: [问题1]:iPhone页面会自动把数字当成电话号码,点击后自动跳到电话拨号界面 ♥♥♥方案:<meta name="format-detection" ...

Zepto：实现移动端tab选项

知识点

代码

运行结果

Zepto：实现移动端tab选项相关推荐

最新文章

热门文章