mui-选项卡+scroll滚动
详细操作见代码:
<!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="css/mui.min.css" rel="stylesheet" />
</head> <body> <!--
mtab:快捷键
mui-segmented-control:多选项控制卡父级
mui-control-item:多选项卡子级
mui-active:选中状态
mui-control-content:每一个选项卡的具体内容,用id通过锚链接获取信息:列如href="#m1"
mui-segmented-control-inverted:背景颜色反转
mui-segmented-control-negative(posivite):红色的
mui-segmented-control-vertical:选项卡竖着的 设置滚动效果:
mui-scroll-wrapper:滚动菜单父级
mui-scroll:滚动菜单子集
mui-slider-indicator:设置横向滚动效果,默认不写,纵向滚动效果
-->
<div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative mui-scroll-wrapper mui-slider-indicator"> <div class="mui-scroll">
<a href="#m1" class="mui-control-item">新闻</a>
<a href="#m2" class="mui-control-item mui-active">政治</a>
<a href="#m3" class="mui-control-item">娱乐</a>
<a href="#m4" class="mui-control-item">推荐</a>
<a href="#m5" class="mui-control-item ">健身</a>
<a href="#m6" class="mui-control-item">文学</a>
<a href="#m7" class="mui-control-item">天文</a>
<a href="#m8" class="mui-control-item ">地理</a>
<a href="#m9" class="mui-control-item">数学</a> </div>
</div> <div class="mui-control-content" id="m1">
你好啊,
</div>
<div class="mui-control-content mui-active" id="m2">
你在吗,
</div>
<div class="mui-control-content" id="m3">
你累吗,
</div> <div class="mui-control-content" id="m4">
你好啊,
</div>
<div class="mui-control-content " id="m5">
你在吗,
</div>
<div class="mui-control-content" id="m6">
你累吗,
</div>
<div class="mui-control-content" id="m7">
你好啊,
</div>
<div class="mui-control-content " id="m8">
你在吗,
</div>
<div class="mui-control-content" id="m9">
你累吗,
</div> <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> <script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body> </html>
具体效果如下:
mui-选项卡+scroll滚动的更多相关文章
- ios中iframe的scroll滚动事件替代方法
在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...
- js中scroll滚动相关
js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- MUI 选项卡切换+下拉刷新动态 完整实现一例
前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...
- 【bug】—— ios scroll 滚动穿透
BUG描述 在 ios 微信浏览器或原生浏览器中,主内容容器.content在文档流内,并且overflow-y: scroll.在其之上有一个 fixed 定位的弹出层.popUp,滚动.popUp ...
- scroll滚动到一定距离触发事件/返回顶部animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mui 选项卡与header文字同步
mui底部tab固定 头部nav可变 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Mui 选项卡 tab 高度 没有自适应....
因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是 用一个值 保存 当前 的 高度... 当 点击其他 t ...
随机推荐
- tmpfs使用探讨
一. 什么是tmpfs? tmpfs是一种基于内存的文件系统,它和虚拟磁盘ramdisk比较类似,但不完全相同,和ramdisk一样,tmpfs可以使用RAM,但它也可以使用swap分区来存储. 而且 ...
- SQL CREATE INDEX 语句
CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...
- SQL CREATE DATABASE 语句
CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库. SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL ...
- Editplus5.0 注册码
EditPlus5.0注册码 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6EW-ECUAW EditPlus3.x注册码 注册名 linzhihui 注册码 5A2B6-69 ...
- winserver的consul部署实践与.net core客户端使用(附demo源码)
winserver的consul部署实践与.net core客户端使用(附demo源码) 前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...
- cumprod、prod函数
1.prod函数 prod函数用于求矩阵元素的积,其调用格式如下. (1)B=prod(A):若A为向量,则返回所有元素的积:若A为矩阵,则返回各列所有元素的积. (2)B=prod(A,dim):返 ...
- python 中内存释放与函数传递numpy数组问题
numpy.array 作为参数传入函数中时,是作为引用进去的,函数内部对这个数组的修改会直接修改原始数据.在函数中需要暂时修改数据,不对原始数据造成影响的话,需要用 np.copy() 先拷贝一份, ...
- VBA Editor Addins --> VBE插件模板开发众筹
https://www.cnblogs.com/Charltsing/p/VBEAddins.html QQ:564955427 8月8日测试版功能说明 1.VBE菜单的创建 2.toolwindow ...
- Android艺术——深看Activity的生命周期
探究Activity的生命周期 1.典型情况下的生命周期分析:onCreate 初始化工作,加载布局资源和数据:onStart ac正在启动但是无法交互,后台:onResume ac可见,显示在前台: ...
- 4.ansible的delegate_to
完成发布流程如下 first 修改nginx 配置文件下线 web1-2 使用 delegate_to 将默认hosts指定为 nginx主机 使用remote_user 将用户 锁定为 root s ...