辰龙old
辰龙old
  • 发布:2016-09-26 15:51
  • 更新:2016-09-26 16:16
  • 阅读:1497

选项卡滑动切换的问题

分类:MUI

<!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 的错误,按照文档问答里的方法怎么也解决不了

2016-09-26 15:51 负责人:无 分享
已邀请:
辰龙old

辰龙old (作者)

搞掂了,改成这样:

getProductCategories();

mui.ready(function () {
mui('#slider').slider();
});

然后将 getProductCategories 内的 mui('#slider').slider() 去掉就可以了

该问题目前已经被锁定, 无法添加新回复