jqweui tabbar使用示例
2024-09-29 11:27:05
<!DOCTYPE html>
<html class="pixel-ratio-1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xxx</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
<style>
/*注意: 一定要定义body,html的style*/
body, html {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body ontouchstart="" style="background:#F8F8F8;">
<div class="weui-tab">
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!----------------注意: 每个页面都必须写在tabxxx里, 例如id=tab1----------------------->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="max-width:100%;" src="__STATIC__/images/shequ/banner_123.jpg" /></div>
<div class="swiper-slide"><img style="max-width:100%;" src="__STATIC__/images/shequ/banner_123.jpg" /></div>
<div class="swiper-slide"><img style="max-width:100%;" src="__STATIC__/images/shequ/banner_123.jpg" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd"><img src="aa.png"></div>
<div class="weui-cell__bd">
<p>隔离防护乳试用装来袭</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
<div class="weui-grids" style="background:#fff;margin-top:14px;margin-bottom:60px;">
<a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
<div class="weui-grid__icon">
<img src="data:images/icon_nav_button.png" alt="">
</div>
<p class="weui-grid__label">
护肤打卡
</p>
</a>
<a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
<div class="weui-grid__icon">
<img src="data:images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">
肌肤测试
</p>
</a>
<a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
<div class="weui-grid__icon">
<img src="data:images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">
必读宝典
</p>
</a>
<a href="" class="weui-grid js_grid" style="width:50%;padding:30px 10px;">
<div class="weui-grid__icon">
<img src="data:images/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">
xxx官网
</p>
</a>
</div>
<!--------------------------------------->
</div>
<div id="tab2" class="weui-tab__bd-item">
<h1>页面二</h1>
</div>
<div id="tab3" class="weui-tab__bd-item">
<h1>页面三</h1>
</div>
<div id="tab4" class="weui-tab__bd-item">
<h1>页面四</h1>
</div>
</div>
<div class="weui-tabbar">
<a href="http://jqweui.com/dist/demos/tabbar.html#tab1" class="weui-tabbar__item weui-bar__item--on">
<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
<div class="weui-tabbar__icon">
<img src="/1_files/icon_nav_button.png" alt="">
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="http://jqweui.com/dist/demos/tabbar.html#tab2" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="/1_files/icon_nav_msg.png" alt="">
</div>
<p class="weui-tabbar__label">变美</p>
</a>
<a href="http://jqweui.com/dist/demos/tabbar.html#tab3" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="/1_files/icon_nav_article.png" alt="">
</div>
<p class="weui-tabbar__label">粉丝圈</p>
</a>
<a href="http://jqweui.com/dist/demos/tabbar.html#tab4" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="/1_files/icon_nav_cell.png" alt="">
</div>
<p class="weui-tabbar__label">我的</p>
</a>
</div>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/swiper.min.js"></script>
<script>
$(".swiper-container").swiper({
loop: true,
autoplay: 3000
});
</script>
</html>
最新文章
- （1）WCF少废话系列之 _Hello WCF!
- Office 365 系列一 ------- 如何单个安装Office 客户端和Skype for business
- Facade设计模式
- 使用 Java Service Wrapper 启动java后台进程服务
- Linux学习之八——利用变量
- 【转】javascript-图片预加载技术
- xtrabackup进行物理备份、恢复、在线克隆从库、在线重做主从
- 关于Git的merge和rebase命令解析
- Delphi5的System.pas只有11514行
- jQuery怎样判断按钮是否被选中
- Nginx (一) 认识Nginx并进行安装
- ios调用Google地图
- vscode开发中绝对让你惊艳的插件！！！(个人在用)
- selenium-server-standalone 和selenium-server, selenium-java的区别
- 【C++】一篇文章,让你不再害怕指针
- java json字符串传递给 js 时 特殊字符转义错误 研究
- 可变数组（PLSQL）
- shell 发送所有内容到会话
- 【RF库Collections测试】Remove From List
- 多名历年高考状元最终选择做中国顶尖黑客 - imsoft.cnblogs