home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/font_size.css" rel="stylesheet" />
<link href="../css/iconfont.css" rel="stylesheet" />
<style type="text/css">
/*.mui-preview-image.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}*/
/*.mui-preview-header,
.mui-preview-footer {
position: absolute;
width: 100%;
left: 0;
z-index: 10;
}*/
/*.mui-preview-header {
height: 44px;
top: 0;
}*/
/*.mui-preview-footer {
height: 50px;
bottom: 0px;
}*/
/*.mui-preview-header .mui-preview-indicator {
display: block;
line-height: 25px;
color: #fff;
text-align: center;
margin: 15px auto 4;
width: 70px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 12px;
font-size: 16px;
}*/
/*.mui-preview-image {
display: none;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}*/
/*.mui-preview-image.mui-preview-in {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}*/
/*.mui-preview-image.mui-preview-out {
background: none;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}*/
/*.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
display: none;
}*/
.mui-zoom-scroller {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
-webkit-backface-visibility: hidden;
}
.mui-zoom {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-slider .mui-slider-group .mui-slider-item img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
width: 100%;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
display: inline-table;
}
.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
display: table-cell;
vertical-align: middle;
}
.mui-preview-loading {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
.mui-preview-loading.mui-active {
display: block;
}
.mui-preview-loading .mui-spinner-white {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
height: 50px;
width: 50px;
}
.mui-preview-image img.mui-transitioning {
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
p img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon iconfont icon-liwu mui-pull-left"></a>
<h2 id="title" class="mui-title">我有礼</h2>
<a href="#" class="mui-icon mui-icon-search mui-pull-right"></a>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-divider">
<a class="mui-navigate-right">
送礼专题
</a>
</li>
</ul>
<p>
<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>
<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>
<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<ul class="mui-table-view">
<li class="mui-table-view-divider">
<a class="mui-navigate-right">
精选礼物
</a>
</li>
</ul>
<p>
<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<div class="mui-media-body">
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<h4>双十一特惠</h4>
</td>
<td align="right">
<a class="mui-icon mui-icon-star mui-pull-right"></a>
</td>
</tr>
</table>
</div>
<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<span class="font_size">RMB 100</span>
</td>
<td align="right">
<div class="mui-btn mui-btn-primary" style="background-color: #000000;">
独家
</div>
<button type="button" class="mui-btn mui-btn-warning">
体验类
</button>
</td>
</tr>
</table>
</div>
</div>
<p style="margin-top:5px;">
<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<div class="mui-media-body">
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<h4>双十一特惠</h4>
</td>
<td align="right">
<a class="mui-icon mui-icon-star mui-pull-right"></a>
</td>
</tr>
</table>
</div>
<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<span class="font_size">RMB 100</span>
</td>
<td align="right">
<div class="mui-btn mui-btn-primary" style="background-color: #000000;">
独家
</div>
<button type="button" class="mui-btn mui-btn-warning">
体验类
</button>
</td>
</tr>
</table>
</div>
</div>
<p style="margin-top:5px;">
<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
</p>
<div class="mui-media-body">
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<h4>双十一特惠</h4>
</td>
<td align="right">
<a class="mui-icon mui-icon-star mui-pull-right"></a>
</td>
</tr>
</table>
</div>
<p class='mui-ellipsis'>原价:200|国际儿童会所 徐汇店</p>
<div style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<td align="left">
<span class="font_size">RMB 100</span>
</td>
<td align="right">
<div class="mui-btn mui-btn-primary" style="background-color: #000000;">
独家
</div>
<button type="button" class="mui-btn mui-btn-warning">
体验类
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script>
mui.init();
mui.plusReady(function() {});
document.getElementById("a_search").addEventListener("tap",function(){
//alert(12);
openNewPage("search.html",{},"slide-in-right");
});
</script>
</html>
search.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="../js/mui.min.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/font_size.css" rel="stylesheet" />
<link href="../css/iconfont.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<table style="width: 100%;">
<tr>
<td style="width: 10%;">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
</td>
<td style="width: 90%;">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="送礼物">
</div>
</td>
</tr>
</table>
</header>
<div class="mui-content">
<div style="border-bottom: 1px solid gray; padding: 5px;">
<table style="height: 15px;">
<tr>
<td style="width:3px; background-color: orange;">
</td>
<td style="width: 100%;">
<span>热门搜索</span>
</td>
</tr>
</table>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
<button type="button" class="mui-btn">
生蚝
</button>
<button type="button" class="mui-btn">
衣服
</button>
</div>
</li>
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
</div>
</li>
</ul>
</div>
<div style="margin-top: 0px; padding: 5px;">
<table style="height: 15px;">
<tr>
<td style="width:3px; background-color: orange;">
</td>
<td style="width: 100%;">
<span>筛选赠送对象</span>
</td>
</tr>
</table>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
<button type="button" class="mui-btn">
生蚝
</button>
<button type="button" class="mui-btn">
衣服
</button>
</div>
</li>
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
</div>
</li>
</ul>
<table style="height: 15px;">
<tr>
<td style="width:3px; background-color: orange;">
</td>
<td style="width: 100%;">
<span>筛选场合or理由</span>
</td>
</tr>
</table>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
<button type="button" class="mui-btn">
生蚝
</button>
<button type="button" class="mui-btn">
衣服
</button>
</div>
</li>
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
</div>
</li>
</ul>
<table style="height: 15px;">
<tr>
<td style="width:3px; background-color: orange;">
</td>
<td style="width: 100%;">
<span>筛选TA喜欢的</span>
</td>
</tr>
</table>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
<button type="button" class="mui-btn">
生蚝
</button>
<button type="button" class="mui-btn">
衣服
</button>
</div>
</li>
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
鲜花
</button>
<button type="button" class="mui-btn">
巧克力
</button>
<button type="button" class="mui-btn">
蛋糕
</button>
<button type="button" class="mui-btn">
生蚝
</button>
<button type="button" class="mui-btn">
衣服
</button>
</div>
</li>
</ul>
<table style="height: 15px;">
<tr>
<td style="width:3px; background-color: orange;">
</td>
<td style="width: 100%;">
<span>筛选预算</span>
</td>
</tr>
</table>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
全部
</button>
<button type="button" class="mui-btn">
￥0~149
</button>
<button type="button" class="mui-btn">
￥150~299
</button>
<button type="button" class="mui-btn">
￥300~499
</button>
</div>
</li>
<li class="mui-table-view-cell">
<div style="width: 100%;">
<button type="button" class="mui-btn">
￥500~999
</button>
<button type="button" class="mui-btn">
￥1000~1999
</button>
<button type="button" class="mui-btn">
￥2000+
</button>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
mui.init();
//mui.previewImage();
</script>
</html>
4 个回复
DCloud_UNI_FXY
贴出来页面完整代码。
forrestxing (作者)
home.html
DCloud_UNI_FXY
你引用了两个mui.min.js
forrestxing (作者)
奥奥，果然是，好的，非常感谢了！