菜单的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/product.css" />
<style>
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
top: 4.82rem;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
border-top: none;
border-bottom: none;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
.mui-active .nav_p {
color: #39AC69 !important;
}
.mui-active .huang-xian {
display: block;
}
</style>
</head>
<body>
<div class="mui-bar mui-bar-nav cm-header-h cm-header-bg-main" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left cm-color-fff"></a>
<h1 class="mui-title cm-color-fff cm-font-size-18">在线产品</h1>
<a class="mui-pull-right" id="search"><img class="search-img" src="../../image/common/search1.png" /></a>
</div>
<div class="mui-bar mui-bar-nav cm-header-h cm-header-bg-main" style="display: none;" id="searchBox">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left cm-color-fff" style="padding-right: 0.5rem;"></a>
<div class="search_box qtSearchBox aui-flex-col cm-bg-white cm-margin-top-10 aui-flex-middle cm-padding-10 cm-border-radius-big">
<div class="search_box_img"><img src="../../image/common/search.png" /></div>
<div class="search_box_cont aui-flex-auto"><input type="text" class="cm-font-size-14" name="" id="" value="" placeholder="输入名称搜索" /></div>
</div>
<a class="mui-pull-right search-colse cm-font-size-14 cm-color-fff" id="colse_search">取消</a>
</div>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen" style="top: 48px;">
<div id="sliderSegmentedControl" class="nav cm-bg-white mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" style="width: 100%;height: 100%;">
<a class="mui-control-item mui-active" href="#item1mobile" style="width: 33.33%;height: 100%; position: relative;line-height: 2.2rem;">
<p class="nav_p cm-font-size-16 cm-color-999">信托<span>18</span></p>
<span class="huang-xian"></span>
</a>
<a class="mui-control-item" href="#item2mobile" style="width: 33.33%;height: 100%; position: relative;line-height: 2.2rem;">
<p class="nav_p cm-font-size-16 cm-color-999">资管<span>18</span></p>
<span class="huang-xian"></span>
</a>
<a class="mui-control-item" href="#item3mobile" style="width: 33.33%;height: 100%; position: relative;line-height: 2.2rem;">
<p class="nav_p cm-font-size-16 cm-color-999">契约<span>18</span></p>
<span class="huang-xian"></span>
</a>
</div>
</div>
<div class="h4"></div>
<div class="list-select">
<ul class="aui-flex-col cm-bg-white aui-flex-middle nav san-nav" id="san-nav">
<li class="aui-flex-item-3 aui-flex-col cm-font-size-14 cm-color-666 aui-flex-center aui-flex-middle">
<span class="select_val">投向</span><span class="xsj"></span>
</li>
<li class="aui-flex-item-3 aui-flex-col cm-font-size-14 cm-color-666 aui-flex-center aui-flex-middle">
<span class="select_val">状态</span><span class="xsj"></span>
</li>
<li class="aui-flex-item-3 aui-flex-col cm-font-size-14 cm-color-666 aui-flex-center aui-flex-middle">
<span class="select_val paix">排序</span><span class="xsj"></span>
</li>
<li class="aui-flex-item-3 no-click aui-flex-col cm-font-size-14 cm-color-666 aui-flex-center aui-flex-middle">
<a id="offCanvasBtn">筛选</a>
</li>
</ul>
<ul class="select_wrapper">
<li class="select_zi" style="display: none;">
<ul class="select_Box">
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">不限</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">政信</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">房地产</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">工商企业</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">资金</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
</ul>
<div class="zzao-bot"></div>
</li>
<li class="select_zi" style="display: none;">
<ul class="select_Box">
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">不限</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">募集中</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">预热中</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
</ul>
<div class="zzao-bot"></div>
</li>
<li class="select_zi" style="display: none;">
<ul class="select_Box">
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">不限</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">收益由高到低</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
<li class="aui-flex-col common_h aui-flex-middle cm-padding-q-10">
<div class="aui-flex-item-8 aui-flex-col cm-font-size-14 cm-color-666">收益由低到高</div>
<div class="aui-flex-item-4 aui-flex-col aui-flex-right">
<span class="select-img"></span>
</div>
</li>
</ul>
<div class="zzao-bot"></div>
</li>
</ul>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view prd-list">
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="1">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托1<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="2">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托1<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="3">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托1<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="4">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托1<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view prd-list">
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托2<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托2<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托2<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托2<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view prd-list">
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托3<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托3<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托3<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media cm-bg-white cm-padding-q-10" id="5">
<a href="javascript:;" class="">
<div class="mui-media-object mui-pull-left prd-list-l">
<div class="list-img">
<img src="../../image/common/DefaultAvatar.png">
</div>
</div>
<div class="mui-media-body">
<p class="aui-flex-col list-title aui-flex-middle cm-font-size-16 cm-color-333">四川信托3<span class="cm-bg-main cm-color-fff cm-font-size-12 cm-margin-left-10">预热</span></p>
<p class="cm-font-size-14 cm-color-666">期限：<span>24个月</span></p>
<div class="aui-flex-col aui-flex-middle">
<p class="aui-flex-item-6">投向：<span>工商企业</span></p>
<p class="aui-flex-item-6">收益：<span>100万 7%</span></p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.pullToRefresh.js"></script>
<script src="../../js/mui.pullToRefresh.material.js"></script>
<script>
mui.init({
swipeBack: true, //启用右滑关闭功能
preloadPages: [{
id: 'product_detail.html',
url: 'product_detail.html'
}]
});
var detailPage = null;
//添加列表项的点击事件
mui('.prd-list').on('tap', 'li', function(e) {
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage) {
detailPage = plus.webview.getWebviewById('product_detail.html');
}
//触发详情页面的newsId事件
mui.fire(detailPage, 'newsId', {
id: id
});
//打开详情页面
mui.openWindow({
id: 'product_detail.html'
});
});
//点击搜索
document.getElementById("search").addEventListener("tap", function() {
document.querySelector('#searchBox').style.display = 'block';
document.querySelector('#header').style.display = 'none';
});
//点击关闭搜索
document.getElementById("colse_search").addEventListener("tap", function() {
document.querySelector('#header').style.display = 'block';
document.querySelector('#searchBox').style.display = 'none';
});
//点击选项筛选
var san_nav = document.querySelectorAll(".san-nav");
[].forEach.call(san_nav, function(obj, index) {
var san_navLi = obj.querySelectorAll('li');
[].forEach.call(san_navLi, function(obj, index) {
obj.addEventListener('tap', function() {
var that = obj;
var selectShows = obj.parentNode.nextElementSibling.querySelectorAll('.select_zi');
if(obj.classList.contains('on')) {
if(index <= 2) {
obj.classList.remove('on');
[].forEach.call(selectShows, function(obj, index) {
obj.style.display = 'none';
});
}
} else {
var childrens = obj.parentNode.children;
[].forEach.call(childrens, function(obj, index) {
obj.classList.remove('on');
});
[].forEach.call(selectShows, function(obj, index) {
obj.style.display = 'none';
});
obj.classList.add('on');
if(index <= 2) {
selectShows[index].style.display = 'block';
var zzaoH = window.innerHeight - document.querySelector('.mui-bar').clientHeight - document.querySelector('#sliderSegmentedControl').clientHeight - obj.parentNode.clientHeight - selectShows[index].querySelector('.select_Box').clientHeight + 44;
selectShows[index].querySelector('.zzao-bot').style.height = zzaoH + 'px';
var selectLi = selectShows[index].querySelector('.select_Box').querySelectorAll('li');
//console.log(selectLi.length);
[].forEach.call(selectLi, function(obj, index) {
obj.addEventListener("tap", function() {
var childrenss = obj.parentNode.children;
[].forEach.call(childrenss, function(obj, index) {
obj.classList.remove('liactive');
});
obj.classList.add('liactive');
that.querySelector(".select_val").innerHTML = obj.textContent;
obj.parentNode.parentNode.style.display = 'none';
that.classList.remove('on');
});
});
}
}
});
});
});
(function($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
$.ready(function() {
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for(var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
fragment.appendChild(li);
}
return fragment;
};
});
})(mui);
</script>
<script>
var main, menu, mask = mui.createMask(_closeMenu);
var showMenu = false;
var isInTransition = false;
mui.init({
beforeback: back
});
function back() {
if(showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function() {
menu = mui.preload({
id: 'offcanvas-drag-left-plus-menu',
url: 'offcanvas-drag-left-plus-menu.html',
styles: {
left: "25%",
width: '75%',
zindex:22
}
});
}, 300);
});
/*
* 显示菜单菜单
*/
function openMenu() {
console.log(showMenu);
if(!showMenu) {
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if(mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "static";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
}
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show('none', 0, function() {
menu.setStyle({
left: '25%',
transition: {
duration: 150
}
});
});
//显示主窗体遮罩
mask.show();
showMenu = true;
}
}
function closeMenu() {
//窗体移动
_closeMenu();
//关闭遮罩
mask.close();
}
/**
* 关闭侧滑菜单(业务部分)
*/
function _closeMenu() {
console.log(showMenu);
if(showMenu) {
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if(mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "fixed";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "48px";
}
menu.setStyle({
left: '100%',
transition: {
duration: 150
}
});
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 300);
showMenu = false;
}
}
document.getElementById("offCanvasBtn").addEventListener('tap', openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swiperight", closeMenu);
//menu页面向右滑动，关闭菜单；
window.addEventListener("menu:swiperight", closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
}
</script>
</body> </html>
//webview的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/product.css" />
<style type="text/css">
body,
html,
.mui-content {
background: #FFFFFF !important;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="hua-title cm-font-size-12 cm-color-999">筛选</div>
<div class="hua-content cm-padding-q-10">
<div>
<p class="cm-color-333 cm-font-size-12">状态</p>
<ul class="hua-list">
<li class="cm-font-size-14 cm-color-666">募集中</li>
<li class="cm-font-size-14 cm-color-666">预热中</li>
</ul>
</div>
<div>
<p class="cm-color-333 cm-font-size-12">付息方式</p>
<ul class="hua-list">
<li class="cm-font-size-14 cm-color-666">按年付息</li>
<li class="cm-font-size-14 cm-color-666">半年付息</li>
<li class="cm-font-size-14 cm-color-666">按季付息</li>
</ul>
</div>
<div>
<p class="cm-color-333 cm-font-size-12">期限</p>
<ul class="hua-list">
<li class="cm-font-size-14 cm-color-666">12个月</li>
<li class="cm-font-size-14 cm-color-666">13-24个月</li>
<li class="cm-font-size-14 cm-color-666">24个月</li>
<li class="cm-font-size-14 cm-color-666">其他</li>
</ul>
</div>
<div>
<p class="cm-color-333 cm-font-size-12">地区</p>
<ul class="hua-list">
<li class="cm-font-size-14 cm-color-666">江苏</li>
<li class="cm-font-size-14 cm-color-666">浙江</li>
<li class="cm-font-size-14 cm-color-666">成都</li>
<li class="cm-font-size-14 cm-color-666">贵州</li>
<li class="cm-font-size-14 cm-color-666">山东</li>
<li class="cm-font-size-14 cm-color-666">北京</li>
<li class="cm-font-size-14 cm-color-666">其他</li>
</ul>
</div>
</div>
<ul class="footer hua-footer common_h aui-flex-col aui-flex-middle">
<li class="aui-flex-item-6 aui-flex-col aui-flex-center aui-flex-middle common_h cm-bg-white cm-color-mian cm-font-size-16" id="Reset">重置</li>
<li class="aui-flex-item-6 aui-flex-col aui-flex-center aui-flex-middle common_h cm-bg-main cm-color-fff cm-font-size-16" id="close-btn">完成</li>
</ul>
</div>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//关闭back、menu按键监听，这样侧滑主界面会自动获得back和memu的按键事件，仅在主界面处理按键逻辑即可；
mui.init({
keyEventBind: {
backbutton: false,
menubutton: false
}
});
//侧滑的选择
var huaList = document.querySelectorAll(".hua-list");
for(var j = 0; j < huaList.length; j++) {
var huaListLi = huaList[j].querySelectorAll('li');
for(var a = 0; a < huaListLi.length; a++) {
huaListLi[a].addEventListener('tap', function() {
var children = this.parentNode.children;
[].forEach.call(children, function(obj, index) {
obj.classList.remove('hua_active');
});
this.classList.add('hua_active');
});
}
}
//点击重置
document.getElementById("Reset").addEventListener("tap", function() {
for(var j = 0; j < huaList.length; j++) {
var huaListLi = huaList[j].querySelectorAll('li');
[].forEach.call(huaListLi, function(obj, index) {
obj.classList.remove('hua_active');
});
}
});
var main = null;
mui.plusReady(function() {
main = plus.webview.currentWebview().opener();
})
function closeMenu() {
mui.fire(main, "menu:swiperight");
}
document.getElementById("close-btn").addEventListener('tap', closeMenu);
</script>
</body> </html>
