<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/weui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="weui-tab">
<!--分页-->
<div class="weui-tab__bd">
<!--第一页-->
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<!--轮播-->
<div class="swiper-container" style="margin: 5px;">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/swiper-1.jpg" width="100%" height="200" /></div>
<div class="swiper-slide"><img src="img/swiper-2.jpg" width="100%" height="200" /></div>
<div class="swiper-slide"><img src="img/swiper-3.jpg" width="100%" height="200" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!--列表-->
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="img/icon_nav_actionSheet.png"></div>
<div class="weui-cell__bd">
<p>一天</p>
</div>
<div class="weui-cell__ft">一天</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><img src="img/icon_nav_article.png"></div>
<div class="weui-cell__bd">
<p>一天</p>
</div>
<div class="weui-cell__ft">一天</div>
</div>
</div>
</div>
<!--第二页-->
<div id="tab2" class="weui-tab__bd-item">
<div class="weui-search-bar" id="searchBar">
<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="searchInput" placeholder="搜索" required="">
<a href="#" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="#" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-grids">
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_button.png" alt="">
</div>
<p class="weui-grid__label" id="clckajx">
Button
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_cell.png" alt="">
</div>
<p class="weui-grid__label">
List
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_icons.png" alt="">
</div>
<p class="weui-grid__label">
Toast
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_dialog.png" alt="">
</div>
<p class="weui-grid__label">
Dialog
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_calendar.png" alt="">
</div>
<p class="weui-grid__label">
Calendar
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_city.png" alt="">
</div>
<p class="weui-grid__label">
City
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_select.png" alt="">
</div>
<p class="weui-grid__label">
Select
</p>
</a>
<a href="#" class="weui-grid ">
<div class="weui-grid__icon">
<img src="img/icon_nav_panel.png" alt="">
</div>
<p class="weui-grid__label">
Panel
</p>
</a>
</div>
<!--json-->
<div class="box"style="background-color: #0086B3;width: 100%;height: 300px;">
<h1>11</h1>
<img src="img/icon_nav_actionSheet.png"/>
<p>11</p>
<div class="box">
<span></span>
<span></span>
</div>
</div>
</div>
<!--第三页-->
<div id="tab3" class="weui-tab__bd-item">
</div>
<!--第四页-->
<div id="tab4" class="weui-tab__bd-item">
</div>
</div>
<div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="#tab2" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">分类</p>
</a>
<a href="#tab3" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">搜索</p>
</a>
<a href="#tab4" class="weui-tabbar__item ">
<div class="weui-tabbar__icon">
<span class="iconfont"></span>
</div>
<p class="weui-tabbar__label">我的</p>
</a>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-weui.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
$(".swiper-container").swiper({
loop: true,
autoplay: 1500
});
$(function(){
$.ajax({
type:"get",
url:'js/index.json',
dataType:"json",
async:true,
success:function(data){
console.log(data)
}
})
})
</script>
</html>
