<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>田野Teenyee</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/app.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
<nav class="mui-bar mui-bar-tab mui-bar-header">
<a class="mui-tab-item mui-active" href="index.html">
<span class="ty-icon ty-icon-home"></span>
</a>
<a class="mui-tab-item" href="person_center.html">
<span class="ty-icon ty-icon-user"></span>
</a>
<a class="mui-tab-item" href="search.html">
<span class="ty-icon ty-icon-search"></span>
</a>
<a class="mui-tab-item" href="shopping_cart.html">
<span class="ty-icon ty-icon-cart"></span>
</a>
</nav>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
</div>
</div>
<div class="mui-slider-group">
</div>
</div>
</div>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var productType = [], currentProductType = '', prevSlideNumber = 0;
mui.ready(function () {
getProductCategories();
document.getElementById('slider').addEventListener('slide', function(e) {
if (prevSlideNumber != e.detail.slideNumber) {
var prevSlideItem = document.querySelector('#item_' + productType[prevSlideNumber]);
if (prevSlideItem) {
prevSlideItem.innerHTML = '<div class="mui-loading"><div class="mui-spinner"></div></div>' + '<ul class="mui-table-view mui-grid-view"></li>';
}
prevSlideNumber = e.detail.slideNumber;
}
currentProductType = productType[e.detail.slideNumber];
getProductList();
});
mui(".mui-slider-group").on("tap", "a", function() {
var productId = this.getAttribute('data-value');
setStorageValue('productId', productId); // 保存到session
openWindow('product_detail');
});
});
function getProductCategories() {
mui.ajax(serverUrl + serverApi + '/product/type', {
data: null,
type: 'get',
async: false,
dataType: 'json',
success: function(res) {
if (res.ret_code === 0) {
if (res.result_list != undefined && res.result_list != null) {
var fragment1 = document.createDocumentFragment(),
fragment2 = document.createDocumentFragment();
mui.each(res.result_list, function(i, list) {
// 创建Tab
var li = document.createElement('a');
li.className = 'mui-control-item';
if (i == 0) li.classList.add('mui-active');
li.setAttribute('href', '#item_' + list.category_code);
li.setAttribute('data-value', list.category_code);
li.innerHTML = list.category_name;
//li.innerHTML = '<span>' + list.category_name + '</span><p></p>';
fragment1.appendChild(li);
// 创建Tab容器
var item = document.createElement('div');
item.setAttribute('id', 'item_' + list.category_code);
item.className = 'mui-slider-item mui-control-content';
item.innerHTML = '<div class="mui-loading"><div class="mui-spinner"></div></div>' + '<ul class="mui-table-view mui-grid-view"></li>';
if (i == 0) {
item.classList.add('mui-active');
currentProductType = list.category_code;
}
fragment2.appendChild(item);
productType.push(list.category_code);
});
document.querySelector('#sliderSegmentedControl .mui-scroll').appendChild(fragment1);
document.querySelector('#slider .mui-slider-group').appendChild(fragment2);
mui('#slider').slider();
}
} else {
mui.toast(res.ret_msg);
}
},
error: function(xhr, type, errorThrown) {
console.log(type);
}
});
getProductList(); // mui('#slider').slider();
}
function getProductList() {
var slider_item = document.querySelector('#item_' + currentProductType);
mui.getJSON(serverUrl + serverApi + '/product/list/' + currentProductType, null, function(res) {
if (res.ret_code === 0) {
if (res.result_list != undefined && res.result_list != null) {
var li, div, divChild,
fragment = document.createDocumentFragment();
mui.each(res.result_list, function(i, list) {
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
div = document.createElement('a');
//div.className = 'ty-media';
div.setAttribute('href', 'javascript:;');
div.setAttribute('data-value', list.id);
// 产品图片
divChild = document.createElement('img');
divChild.className = 'mui-media-object';
if (list.product_image != undefined && list.product_image != null && list.product_image.length > 5) {
//divChild.style.backgroundImage = 'url(' + setImageUrl(list.product_image) + ')';
divChild.setAttribute('src', setImageUrl(list.product_image));
}
div.appendChild(divChild);
// 产品名称
divChild = document.createElement('div');
divChild.className = 'mui-media-body';
divChild.innerHTML = list.product_name;
div.appendChild(divChild);
// 产品价格
divChild = document.createElement('div');
divChild.className = 'mui-media-body';
if (list.default_sku != undefined && list.default_sku != null && !isNaN(list.default_sku.sales_price)) {
divChild.innerHTML = '￥' + list.default_sku.sales_price.toFixed(2);
}
div.appendChild(divChild);
li.appendChild(div);
fragment.appendChild(li);
});
if (slider_item.querySelector('.mui-loading')) {
setTimeout(function() {
slider_item.querySelector('.mui-loading').remove();
slider_item.querySelector('.mui-grid-view').appendChild(fragment);
}, 500);
}
} else {
if (slider_item.querySelector('.mui-loading')) {
setTimeout(function() {
mui.toast('该类别没有相关数据');
slider_item.innerHTML = '<div class="none-product"><div></div><p>商品存在努力打造中</p></div>';
}, 500);
}
}
} else {
mui.toast(res.ret_msg);
}
});
}
</script>
</body> </html>
通过代码动态生成的选项卡，当左右滑动时都会报 mui.min.js:6 Uncaught TypeError: Cannot read property '0' of undefined 的错误，按照文档问答里的方法怎么也解决不了
1 个回复
辰龙old (作者)
搞掂了，改成这样：
getProductCategories();
mui.ready(function () {
mui('#slider').slider();
});
然后将 getProductCategories 内的 mui('#slider').slider() 去掉就可以了