用WeUI 中的weui-tab 配合js实现weui-tab tabbar 页面切换切换功能
2024-04-20 10:04:11
图片路径：https://download.csdn.net/download/ypz131023/10825133；（需要的可以私聊给）
示例效果图
js代码块
test
<div class="weui-tab">
<div class="weui-tab__bd"><div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active"><div class="weui-search-bar" id="search_bar"><form class="weui-search-bar__form"><div class="weui-search-bar__box"><i class="weui-icon-search"></i><input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" /><a href="javascript:" class="weui-icon-clear" id="search_clear"></a></div><label for="search_input" class="weui-search-bar__label" id="search_text"><i class="weui-icon-search"></i><span>搜索</span></label></form><a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a></div><div class="weui-cells weui-cells_access search_show" id="search_show"><div class="weui-cell"><div class="weui-cell__bd weui-cell_primary"><p>智障</p></div></div><div class="weui-cell"><div class="weui-cell__bd weui-cell_primary"><p>傻子</p></div></div><div class="weui-cell"><div class="weui-cell__bd weui-cell_primary"><p>逗比</p></div></div><div class="weui-cell"><div class="weui-cell__bd weui-cell_primary"><p>生活</p></div></div></div></div><!-- /*通讯录*/ --><div id="tab2" class="weui-tab__bd-item"><div class="page__bd"><div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div><div class="weui-cells"><div class="weui-cell weui-cell_access"><div class="weui-cell__bd">单行列表</div><div class="weui-cell__ft" style="font-size: 0"><span style="vertical-align:middle; font-size: 17px;">详细信息</span><span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span></div></div></div><div class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div><div class="weui-cells"><div class="weui-cell"><div class="weui-cell__hd" style="position: relative;margin-right: 10px;"><img src="data:images/pic_160.png" style="width: 50px;display: block"/><span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span></div><div class="weui-cell__bd"><p>联系人名称</p><p style="font-size: 13px;color: #888888;">摘要信息</p></div></div><div class="weui-cell weui-cell_access"><div class="weui-cell__bd"><span style="vertical-align: middle">单行列表</span><span class="weui-badge" style="margin-left: 5px;">8</span></div><div class="weui-cell__ft"></div></div><div class="weui-cell weui-cell_access"><div class="weui-cell__bd"><span style="vertical-align: middle">单行列表</span><span class="weui-badge" style="margin-left: 5px;">8</span></div><div class="weui-cell__ft">详细信息</div></div><div class="weui-cell weui-cell_access"><div class="weui-cell__bd"><span style="vertical-align: middle">单行列表</span><span class="weui-badge" style="margin-left: 5px;">New</span></div><div class="weui-cell__ft"></div></div></div></div></div><!-- 发现--><div id="tab3" class="weui-tab__bd-item"><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/iconweixinpengyouquan.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>朋友圈</p></div><div class="weui-cell__ft"></div></a></div><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/saoyisao.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>扫一扫</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/share.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>摇一摇</p></div><div class="weui-cell__ft"></div></a></div><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/Sercher.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>看一看</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/select.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>搜一搜</p></div><div class="weui-cell__ft"></div></a></div><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/nearpeople.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>附近的人</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/floatcup.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>漂流瓶</p></div><div class="weui-cell__ft"></div></a></div></div><!--我--><div id="tab4" class="weui-tab__bd-item"><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/package.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>钱包 </p></div><div class="weui-cell__ft"></div></a></div><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/xiaochengxu.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>小程序</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/bhj3dweixinqiang.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>收藏</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/photo.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>相册</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/cardpackage.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>卡包</p></div><div class="weui-cell__ft"></div></a><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/emotion.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>表情</p></div><div class="weui-cell__ft"></div></a></div><div class="weui-cells"><a class="weui-cell weui-cell_access" href="javascript:;"><div class="weui-cell__hd"><img src="/images/weichat/seting.png" alt="" style="width:20px;margin-right:5px;display:block"></div><div class="weui-cell__bd"><p>设置</p></div><div class="weui-cell__ft"></div></a></div></div></div>
用WeUI 中的weui-tab 配合js实现weui-tab tabbar 页面切换切换功能相关推荐
- js vue中得延时器_Vue.js实现时分秒倒计时
我们平常浏览网页的时候,经常见到"距游戏公测1天2小时3分钟4秒"这样的倒计时器.时间如沙漏般一点点的减少,不仅能挑起用户的兴趣,而且让页面提升了一点逼格,还填补掉一些尴尬的空白位 ...
- pwa js_如何在互联网信息亭中实现PWA和Barba.js
pwa js by Nino Mihovilić 由NinoMihovilić 如何在互联网信息亭中实现PWA和Barba.js (How to Implement a PWA and Barba.j ...
- vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) ...
- docker -v 覆盖了容器中的文件_springboot配合maven打成可执行jar，构建镜像部署到docker容器中...
本篇文章将介绍springboot应用如何打成jar包,并将jar构建为docker镜像部署到docker中 应用打包 需要配合spring-boot-maven-plugin打包,将以下代码放到应用 ...
- linux mysql 运行状态_Linux中使用mysqladmin extended-status配合Linux命令查看MySQL运行状态...
mysqladmin是MySQL一个重要的客户端,最常见的是使用它来关闭数据库,除此,该命令还可以了解MySQL运行状态.进程信息.进程杀死等.本文介绍一下如何使用mysqladmin extende ...
- 原生js实现一个tab栏的标签操作
我是歌谣 闲来无事做 就不如写写代码 本次不过多对原生的操作进行说法 我们直接上代码 效果图 有一个index.html的文件 <!DOCTYPE html> <html lang= ...
- 总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程 文章目录 总结Vue中index.html.main.js.App.vue.index ...
- 前台为html后台是asp在vs2012中建立什么,Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得...
Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得 < type="text/javascript"> < type="text/java ...
- php 热点图,JavaScript_javascript如何写热点图，在gis中，你如果用js来写热点 - phpStudy...
javascript如何写热点图 在gis中,你如果用js来写热点图 不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有.而且用js不借助arcgis发布rest服务,(注:热点图可以借助服务 ...
- 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
最新文章
- 华为正式发布自有操作系统鸿蒙OS
- Redis基础知识点总结
- 细思极恐，你真的会写 Java 吗
- matlab鬼成像,一种基于光计算的可视化计算鬼成像系统及成像方法与流程
- C++走向远洋——26（项目二，2,构造函数与析构函数）
- python(matplotlib3)——ticks（坐标刻度）能见度
- ModelSim入门及Testbench编写——合理利用仿真才是王道
- Windows静态库和动态库的调用方法汇总
- 千位分隔符转换为数字
- 分布式事务seata只支持MySQL_阿里分布式事务框架Seata原理解析
- 一篇相当不错的function入门文章
- 谁才是世界上最好的 CI/CD 工具？
- css 文本两端对齐终极解决方案--一丝冰凉
- WebStorm介绍
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(8)-DbSession线程内唯一
- 查看DLL中导出的函数及参数
- pscc2019滤镜抽出_Adobe Photoshop CC 2019滤镜工具提升图片清晰度（PS）教程
- 免费天气API接口，全国天气免费接口，2018年3月测试稳定OK
- 常用的一些LDO芯片及使用
- azkaban报Error Chunking during uploading files to db