商品分类做滚动效果

git-svn-id: svn://svn7.apicloud.com/A6007457911931/%E5%9C%88%E5%A4%9A%E5%A4%9A@680 0e1a2743-8d03-4e5a-a60c-7e26af42b145

html/frame0.html

@@ -212,8 +212,7 @@
 			<!-- <div class="h10" style="height: 2.5rem;"></div> -->
 			<div class="home-ads" style="border-radius: 0.1rem;">
 				<div class="swiper-container" id="swiper" style="border-radius: 0.1rem;">
-					<div class="swiper-wrapper">
-					</div>
+					<div class="swiper-wrapper"></div>
 					<div class="swiper-pagination"></div>
 				</div>
 			</div>
@@ -483,6 +482,11 @@
 							},
 							loop: true,
 							speed:400,
+							on: {
+								slideChangeTransitionEnd: function(){
+									console.log("123")
+								},
+							 },
 							pagination: {
 								el: '.swiper-pagination',
 							},

html/home/hoteldtl.html

@@ -66,7 +66,8 @@
        width:100%
      }
      .weui-tab.tabh {
-      height: 2.7rem;
+      /* height:4.64rem; */
+	  height:3.04rem;
      }
      .hotel-title{
        font-size: 0.38rem;
@@ -118,7 +119,6 @@
       }
       .goods-title {
           height: auto;
-		  
 		  overflow : hidden;
 		  text-overflow: ellipsis;
 		  display: -webkit-box;
@@ -260,10 +260,10 @@
           left: 0;
           bottom: 0;
       }
-        .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
+       .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
             bottom: 0;
         }
-        .swiper-pagination-bullet {
+       .swiper-pagination-bullet {
             background: #fff;
             opacity: .8;
         }
@@ -365,6 +365,34 @@
 			transform: translateZ(0);-webkit-transform: translateZ(0);
 			/* background-color: #fff; */
 		}
+		.swiperType{
+			/* height: 3.4rem; */
+			height: 1.8rem;
+			box-sizing: border-box;
+			width: 100%;
+			padding-top: 0.2rem;
+		}
+		.swiperType .flex-box-v{
+			width: 20%;
+			text-align: center;
+			font-size: 0.26rem;
+			height: 1.6rem;
+		}
+		.swiperType .flex-box-v img{
+			width: 1.04rem;
+			height: 1.04rem;
+			margin-bottom: 0.1rem;
+		}
+		.dian div{
+		    width: 20px;
+			height: 3px;
+			border-radius: 3px;
+			margin: 0 2px;
+			background-color: #C7C7C7;
+		}
+		.activeD{
+			background-color: #d9251c !important;
+		}
     </style>
 		<script>
 			(function(w, d, m) {
@@ -432,7 +460,15 @@
 				</div>
 			</div>
 			<div class="weui-tab__panel">
-				<div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active"></div>
+				<div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active">
+					<div class="swiperType">
+						<div class="swiper-wrapper">
+						</div>
+						<div class="dian flex-box flex-center-center">
+							<div class="activeD"></div>
+						</div>
+					</div>
+				</div>
 				<div id="tab2" class="weui_tab_bd_item feed-list" page="1" style="padding-top: 0.2rem; padding:0 0.32rem;"></div>
 				<div id="tab3" class="weui_tab_bd_item" style="padding: 0 0.32rem;">
 					<div style="background:#ffffff;width:100%;padding-bottom: 1.2rem;">
@@ -472,8 +508,7 @@
 				<li class="gsort goods-sprice" tag="goods_price">价格<img class="sort-img" src="../../image/sort.png" /></li>
 				<li id="category-btn" tag="gc_id_1">分类<img class="sort-img2" src="../../image/sort_down2.png" /></li>
 			</ul>
-			<div id="category-item" class="category-item mask-hidden">
-			</div>
+			<div id="category-item" class="category-item mask-hidden"></div>
 		</div>
 		<section>
 			<div class="h10"></div>
@@ -567,10 +602,10 @@
 			$(window).scroll(function() {
 				// var a = document.getElementById("div_top").offsetTop;
 				// console.log($(window).scrollTop());
-				
-				if ($(window).scrollTop()>=200) {
+
+				if ($(window).scrollTop() >= 200) {
 					$(".ft").addClass("fixed_top");
-				}else{
+				} else {
 					$(".ft").removeClass("fixed_top");
 				}
 				// if ($("#div_top").outerHeight() <= $(window).scrollTop()) {
@@ -623,7 +658,8 @@
 						if (datas.data.store_slide.length > 0) {
 							$.each(datas.data.store_slide, function(index, item) {
 								if (item.indexOf('jpg') != -1) {
-									$(".swiper-wrapper").append('<div class="swiper-slide" type="0" keyid="0"><img src="' + item +'"/></div>');
+									$(".ss").append('<div class="swiper-slide" type="0" keyid="0"><img src="' + item +
+										'"/></div>');
 									// $(".swiper-wrapper").append('<div class="swiper-slide bg-full" style="background: url(' + item + ');">');
 								}
 							})
@@ -676,6 +712,15 @@
 			});
 		}
 
+		function group(array, subGroupLength) {
+			let index = 0;
+			let newArray = [];
+			while (index < array.length) {
+				newArray.push(array.slice(index, index += subGroupLength));
+			}
+			return newArray;
+		};
+
 		function getstoreCategory() {
 			$.ajax({
 				url: siteurl + 'v1/entry/storeCategory',
@@ -690,25 +735,55 @@
 				type: 'post',
 				success: function(datas) {
 					if (datas.result) {
-						var _html = '<div class="weui-flex">';
-						var xx = datas.data.category_list;
-						for (var i = 0; i < 10; i++) {
-							if (i == 5 && !xx[i]) {
-								_html += '</div>';
-								break;
-							}
-							if (i == 5) {
-								_html += '</div><div class="weui-flex">';
-								$(".weui-tab").css("height", "4.7rem");
-							}
-							if (xx[i]) {
-								_html += '<div class="weui-flex__item"><div class="placeholder" gcid="' + xx[i].gc_id +
-									'"><img style="height: 1rem;" src="' + xx[i].pic + '" /><p>' + xx[i].gc_name + '</p></div></div>';
-							} else {
-								_html += '<div class="weui-flex__item"><div class="placeholder"></div></div>';
-							}
+						var _html = "";
+						var data = group(datas.data.category_list, 10);
+						if(datas.data.category_list.length>5){
+							$(".swiperType").css("height",'3.4rem');
+							$(".weui-tab.tabh").css("height",'4.64rem');
 						}
-						$(_data_toggle).html(_html);
+						data.forEach((itme,index) => {
+							if(index!=0){
+								$(".dian").append(`<div></div>`)
+							}	
+							_html = `<div class="swiper-slide flex-box flex-d-wrap" style="height:100%">`;
+							itme.forEach(item2 => {
+								_html +=`<div class="flex-box-v flex-center-center spItme" gcid="${item2.gc_id}">
+												<img src="${item2.pic}"/>
+												<span>${item2.gc_name}</span>
+										</div>`
+							})
+							_html += `</div>`;
+							$(".swiperType .swiper-wrapper").append(_html)
+						})
+						var swiper = new Swiper('.swiperType', {
+							fade: {crossFade: true},
+							pagination: {
+								el: '.paginationType',
+							},
+							on: {
+								slideChangeTransitionEnd: function(){
+									console.log(this.activeIndex)
+								 $(".dian div").removeClass("activeD");
+								 $(".dian div").eq(this.activeIndex).addClass("activeD")
+								},
+							 },
+						});
+						// var _html = '<div class="weui-flex">';
+						// for (var i = 0; i < 10; i++) {
+						// 	if (i == 5 && !xx[i]) {
+						// 		_html += '</div>';
+						// 		break;
+						// 	}
+						// 	if (i == 5) {
+						// 		_html += '</div><div class="weui-flex">';
+						// 		$(".weui-tab").css("height", "4.7rem");
+						// 	}
+						// 	if (xx[i]) {
+						// 		_html += '<div class="weui-flex__item"><div class="placeholder" gcid="' + xx[i].gc_id +'"><img style="height: 1rem;" src="' + xx[i].pic + '" /><p>' + xx[i].gc_name + '</p></div></div>';
+						// 	} else {
+						// 		_html += '<div class="weui-flex__item"><div class="placeholder"></div></div>';
+						// 	}
+						// }
 					} else {
 						errcode(datas, datas.code);
 					}
@@ -741,9 +816,9 @@
 			});
 			return false;
 		})
-		$("#tab1").on("tap", ".placeholder", function() {
+		$("#tab1").on("tap", ".spItme", function() {
 			var _gcid = $(this).attr("gcid");
-			var _categoryname = $(this).children("p").html();
+			var _categoryname = $(this).children("span").html();
 			if (!_gcid) {
 				return false;
 			}
@@ -801,7 +876,7 @@
 				store_id: _storeid,
 				page: _page,
 				praise: _desc,
-				page_size:'20',
+				page_size: '20',
 			};
 			var _data_type = $(".hotel-goods-active").attr("tag");
 			if (_data_type == 'praise') {
@@ -809,21 +884,21 @@
 					store_id: _storeid,
 					page: _page,
 					praise: _desc,
-					page_size:'20',
+					page_size: '20',
 				};
 			} else if (_data_type == 'goods_commonid') {
 				_xdata = {
 					store_id: _storeid,
 					page: _page,
 					goods_commonid: _desc,
-					page_size:'20',
+					page_size: '20',
 				};
 			} else if (_data_type == 'goods_price') {
 				_xdata = {
 					store_id: _storeid,
 					page: _page,
 					goods_price: _desc,
-					page_size:'20',
+					page_size: '20',
 				};
 			} else {
 				var catid = $("#category-item .cate-active").parent(".category-list").attr("catid");
@@ -831,14 +906,14 @@
 					_xdata = {
 						store_id: _storeid,
 						page: _page,
-						page_size:'20',
+						page_size: '20',
 					};
 				} else {
 					_xdata = {
 						store_id: _storeid,
 						page: _page,
 						gc_id_1: catid,
-						page_size:'20',
+						page_size: '20',
 					};
 				}
 			}
@@ -1114,7 +1189,6 @@
 			return false;
 		})
 		$(".share-item-friend").on("tap", function() {
-
 			var wx = api.require('wx');
 			api.download({
 				url: imgUrl,