分类

manifest.json

@@ -70,19 +70,17 @@
             "base" : "/index/",
             "mode" : "history"
         },
-        "devServer" : {
-            "proxy" : {
-                "/api" : {
-                    "target" : "http://ls.frp.liuniu946.com/api",
-                    // "changeOrigin" : true,
-                    // "secure" : false,
-                    "pathRewrite" : {
-                        "/api" : "" // rewrite path
-                    }
-                }
-            },
-			"https": false
-        }
+		"devServer" : {
+		    "proxy" : {
+		        "/api" : {
+		            "target" : "http://ls.frp.liuniu946.com/api",
+		            // "changeOrigin": true,
+		            "pathRewrite" : {
+		                "/api" : "" // rewrite path
+		            } 
+		        }
+		    }
+		}
     }
 }
 // rewrite path

pages/category/category.vue

@@ -1,31 +1,19 @@
 <template>
 	<view class="content">
 		<scroll-view scroll-y class="left-aside">
-			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
-				{{ item.cate_name }}
-			</view>
+			<view v-for="(item,index) in flist" :key="item.id" class="f-item b-b" :class="{ active: index === currentId }" @click="tabtap(item,index)">{{ item.cate_name }}</view>
 		</scroll-view>
-		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
-			<view v-for="item in flist" :key="item.id" class="s-list" :id="'main-' + item.id">
-				<text class="s-item">{{ item.cate_name }}</text>
-				<view class="t-list ">
-					<view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in item.children" :key="titem.id">
-						<view class="">
-							<image :src="titem.pic"></image>
-						</view>
-						
-						<view class="titem-right">
-							<text>{{ titem.cate_name }}<br><text>跨店联盟洗护专属礼包</text></text>
-							<view class="titem-right-d">
-								<view class="price">
-									￥138
-								</view>
-								<view class="button">
-									马上购
-								</view>
-							</view>
+		<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" :scroll-top="tabScrollTop" @scrolltolower="getProductsList(flist[currentId])">
+			<view class="t-list ">
+				<view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in flist[currentId].list" :key="titem.id">
+					<view class=""><image :src="titem.pic"></image></view>
+
+					<view class="titem-right">
+						<text class="clamp">{{ titem.store_name }}</text>
+						<view class="titem-right-d">
+							<view class="price">￥{{ titem.price }}</view>
+							<view class="button">马上购</view>
 						</view>
-						
 					</view>
 				</view>
 			</view>
@@ -34,7 +22,7 @@
 </template>
 
 <script>
-import { getCategoryList } from '@/api/product.js';
+import { getCategoryList, getProducts } from '@/api/product.js';
 export default {
 	data() {
 		return {
@@ -42,6 +30,7 @@ export default {
 			tabScrollTop: 0,
 			currentId: 1,
 			flist: [],
+			scrollAnimation: true //是否开启动画
 		};
 	},
 	onLoad() {
@@ -55,86 +44,113 @@ export default {
 	},
 	methods: {
 		// 载入数据
-		async loadData() {
+		loadData() {
 			let obj = this;
 			getCategoryList({})
 				.then(({ data }) => {
+					console.log(data);
 					obj.flist = data.map(function(s) {
+						s.list = []; //用于保存当前分类下商品对象的数据
+						s.loadingType = 'more'; //判断当前商品分类数据是否已经加载完毕
+						s.page = 1; //当前商品分类加载的商品页数
+						s.limit = 10; //每次家在数据加载的数据条数
 						return s;
 					});
+					// console.log(obj.flist,"123456789")
+					obj.currentId = 0;
+					obj.getProductsList(obj.flist[0]);
 				})
 				.catch(err => {
 					console.log(err);
 				});
 		},
-		//一级分类点击
-		tabtap(item) {
-			console.log(item);
-			// 判断有没有初始化页面高度对象数据
-			if (!this.sizeCalcState) {
-				this.calcSize();
-			}
-			// 获取当前点击的id
-			this.currentId = item.id;
-			this.tabScrollTop = item.top;
-		},
-		//右侧栏滚动
-		asideScroll(e) {
-			// 判断有没有初始化页面高度对象数据
-			if (!this.sizeCalcState) {
-				this.calcSize();
+		getProductsList(item, type = 'add') {
+			if (type === 'tabChange' && item.loaded === true) {
+				//tab切换只有第一次需要加载数据
+				return;
 			}
-			let scrollTop = e.detail.scrollTop;
-			let box = 0; //列表包裹框高度初始化
-			let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
-			// 查询当前页面对象
-			let view = uni.createSelectorQuery().select('.content');
-			view.fields(
-				{
-					id: true,
-					dataset: true,
-					rect: true,
-					size: true,
-					scrollOffset: true
-				},
-				function(e) {
-					// 保存包裹框高度
-					box = e.height;
-				}
-			).exec();
-			// 获取所有距离顶部大于滚轮距离页面高度的所有分类
-			let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
-			if (tabs.length > 0) {
-				// 判断是否已经到达滚轮底部
-				if (box + scrollTop + bottom >= e.detail.scrollHeight) {
-					this.currentId = this.flist[this.flist.length - 1].id;
-				} else {
-					this.currentId = tabs[0].id;
-				}
+			if (item.loadingType === 'noMore' || item.loadingType === 'loading') {
+				//防止重复加载
+				return;
 			}
-		},
-		//计算右侧栏每个tab的高度等信息
-		calcSize() {
-			let h = 0;
-			this.flist.forEach(item => {
-				let view = uni.createSelectorQuery().select('#main-' + item.id);
-				view.fields(
-					{
-						size: true
-					},
-					data => {
-						item.top = h;
-						h += data.height;
-						item.bottom = h;
-					}
-				).exec();
+			item.loadingType = 'loading';
+			const obj = this;
+			const requestData = {
+				page: item.page,
+				limit: item.limit,
+				cid: item.id
+			};
+			return new Promise((ok, erro) => {
+				getProducts(requestData)
+					.then(({ data }) => {
+						item.list = item.list.concat(data);
+						item.page ++
+						if(item.limit != data.length){
+							item.loadingType = 'noMore'
+						}else {
+							item.loadingType = 'more'
+						}
+						this.$set(item, 'loaded', true);
+						obj.$nextTick(e => {
+							// 重新开启动画效果
+							uni.hideLoading();
+							// 数据加载完成后重新计算高度
+							obj.scrollAnimation = true;
+						});
+						ok(data);
+					})
+					.catch(err => {
+						erro(err);
+						console.log(err);
+					});
 			});
-			this.sizeCalcState = true;
 		},
+		//一级分类点击
+		tabtap(item,index) {
+			let obj = this;
+			// 获取当前点击的id
+			this.currentId = index;
+			obj.getProductsList(item);
+		},
+		//右侧栏滚动
+		// asideScroll(e) {
+		// 	// 判断有没有初始化页面高度对象数据
+		// 	if (!this.sizeCalcState) {
+		// 		this.calcSize();
+		// 	}
+		// 	let scrollTop = e.detail.scrollTop;
+		// 	let box = 0; //列表包裹框高度初始化
+		// 	let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
+		// 	// 查询当前页面对象
+		// 	let view = uni.createSelectorQuery().select('.content');
+		// 	view.fields(
+		// 		{
+		// 			id: true,
+		// 			dataset: true,
+		// 			rect: true,
+		// 			size: true,
+		// 			scrollOffset: true
+		// 		},
+		// 		function(e) {
+		// 			// 保存包裹框高度
+		// 			box = e.height;
+		// 		}
+		// 	).exec();
+		// 	// 获取所有距离顶部大于滚轮距离页面高度的所有分类
+		// 	let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
+		// 	if (tabs.length > 0) {
+		// 		// 判断是否已经到达滚轮底部
+		// 		if (box + scrollTop + bottom >= e.detail.scrollHeight) {
+		// 			this.currentId = this.flist[this.flist.length - 1].id;
+		// 		} else {
+		// 			this.currentId = tabs[0].id;
+		// 		}
+		// 	}
+		// },
 		navToList(sid, tid) {
 			// 点击导航跳转到详细页面
 			uni.navigateTo({
-				url: '/pages/product/list?fid='+this.currentId+'&sid='+sid+'&tid='+tid
+				url: '/pages/product/product?fid=' + this.currentId + '&sid=' + sid + '&tid=' + tid
 			});
 		}
 	}
@@ -155,8 +171,7 @@ page,
 	flex-shrink: 0;
 	width: 200rpx;
 	height: 100%;
-	background-color: #F2F2F2;
-	
+	background-color: #f2f2f2;
 }
 .f-item {
 	display: flex;
@@ -179,7 +194,7 @@ page,
 			transform: translateY(-50%);
 			height: 100%;
 			width: 4rpx;
-			background-color: #1075FF;
+			background-color: #1075ff;
 			border-radius: 0 4px 4px 0;
 			opacity: 0.8;
 		}
@@ -222,7 +237,7 @@ page,
 	margin-top: 20rpx;
 	flex-shrink: 0;
 	display: flex;
-	border-bottom: solid 1rpx #F2F2F2;
+	border-bottom: solid 1rpx #f2f2f2;
 	// justify-content: center;
 	// align-items: center;
 	// flex-direction: column;
@@ -238,11 +253,13 @@ page,
 		margin: 0 20rpx;
 		border-radius: 10rpx;
 	}
-	
+
 	.titem-right {
+		width: 100%;
 		display: grid;
 		align-content: space-between;
 		text:nth-child(1) {
+			width: 100%;
 			color: #333333;
 			font-size: 32rpx;
 		}
@@ -253,13 +270,14 @@ page,
 		.titem-right-d {
 			display: flex;
 			justify-content: space-between;
+			padding-right: 20rpx;
 			.price {
-				color: #FB3A2F;
+				color: #fb3a2f;
 				font-size: 32rpx;
 			}
 			.button {
-				background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
-				background-color: #438BED;
+				background: linear-gradient(90deg, #438bed 0%, #44bfec 100%);
+				background-color: #438bed;
 				height: 50rpx;
 				line-height: 50rpx;
 				border-radius: 25rpx;
@@ -268,7 +286,6 @@ page,
 				font-size: 25rpx;
 			}
 		}
-		
 	}
 }
 </style>