edit

pages/dream/cate.vue

@@ -2,13 +2,13 @@
 	<view class="category">
 		<view class="category-wrapper" v-if="fetch.cate.length>0">
 			<!-- 左边导航 -->
-			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
+			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true">
 				<view class="left-content">
-					<view class="title-content" :class="select_index === k?'onSelected':''" v-for="(v,k) in fetch.cate" :key="k" @tap="choose(k)">{{v.name}}</view>
+					<view class="title-content" :class="fetch.show[v.id] == 1?'onSelected':''" v-for="(v,k) in fetch.cate" :key="v.id" @click="choose(v.id)">{{v.name}}</view>
 				</view>
 			</scroll-view>
 			<!-- 右边内容 -->
-			<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
+			<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true">
 				<view class="right-content">
 					<!-- banner区域 -->
 					<view class="banner-wrapper" v-if="swiperList.length > 0">
@@ -20,12 +20,12 @@
 					</view>
 					<!-- 产品区 -->
 					<view class="product-wrapper">
-						<view class="category-item" :id="'list'+k" v-for="(v,k) in fetch.child" :key="k" v-if="v.show == 1">
+						<view class="category-item" :id="'list'+v.id" v-for="(v,k) in fetch.child" :key="k" v-if="fetch.show[v.page_id] == 1">
 							<view class="category-title">{{v.name}}</view>
 							<view class="category-content">
-								<view class="product-item" v-for="(v1,k1) in v.content" :key="k1">
+								<view class="product-item" v-for="(v1,k1) in v.content" :key="k1" @click="go(v1.id)">
 									<image class="product-img" :src="v1.pic"></image>
-									<text class="product-title">{{v1.cname}}</text>
+									<text class="product-title">{{v1.name}}</text>
 								</view>
 							</view>
 						</view>
@@ -41,86 +41,38 @@
 		data() {
 			return {
 				fetch: {
-					cate : []
-				},
-				windows_height: 0, //屏幕高度
+					cate : [],
+					show : {},
+					child : [],
+				},
+				cur : 0,
 				swiperList: [],
-				catrgoryList: [],
-				select_index: 0,
-				right_height: [], //右侧每个内容的高度集合
-				right_scroll: 0, //右侧的滑动值
-				left_height: 0, //左侧总高度
-				left_scroll: 0, //左侧滑动值
-				last: 0,
+				parent_page: 0,
+				page : 0,
+				id : 0,
 			}
 		},
 		onLoad(option) {
-			this.id = option.id;
+			this.id = option.id;
+			this.parent_page = option.parent_page;
+			this.page = option.page;
+			this.cur = this.parent_page;
 			this.getData();
-			this.windows_height = uni.getSystemInfoSync().windowHeight;
 		},
 		methods: {
 			getData : function() {
-				this.Dever.get(this, 'app/collection/?l=api.category', {id:this.id});
+				this.Dever.get(this, 'app/collection/?l=api.category', {id:this.id, parent_page:this.parent_page, page:this.page});
 			},
-			init : function() {
-				uni.request({
-					url: 'https://www.easy-mock.com/mock/5d351e87b5e1f213739d6498/shop/categoryList', //仅为示例，并非真实接口地址。
-					method: 'GET',
-					success: (res) => {
-						if (res.data.error === 0) {
-							this.catrgoryList = res.data.data.list;
-							this.swiperList = res.data.data.banner;
-							this.$nextTick(() => {
-								this.getHeightList();
-							})
-						}
-					}
-				});
-			},
-			getHeightList : function() {
-				let _this = this;
-				let selectorQuery = uni.createSelectorQuery();
-				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
-					_this.left_height = rects.height;
-				});
-				selectorQuery.selectAll('.category-item').boundingClientRect(function(rects) {
-					_this.right_height = rects.map((item) => item.top);
-					console.log(_this.right_height)
-				}).exec();
-			},
-			choose : function(index) {
-				if (this.select_index === index) {
-					return;
-				}
-				this.select_index = index;
-				// 加入防抖
-				if (this.timeout) {
-					clearTimeout(this.timeout); //清除计时器				
-				}
-				this.timeout = setTimeout(() => {
-					this.right_scroll = this.right_height[index] - 110;
-				}, 300)
-			}, 
-			myscroll : function(e) {
-				//引入节流	
-				let right_content_height = e.detail.scrollHeight - this.windows_height;
-				if (right_content_height == e.detail.scrollTop) {
+			choose : function(id) {
+				if (this.fetch.show[id] == 1) {
 					return;
-				}
-				let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
-				//判断当前的scrollTop在哪个区间内;
-				let now = +new Date();
-				if (now - this.last > 100) {		
-					this.last = now;
-					let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
-					this.select_index = active_index;
-					if (this.left_height - this.windows_height) {
-						//如果有超出部分
-						let diff = this.left_height - this.windows_height
-						this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1))
-					}
-				}
+				}
+				this.fetch.show[id] = 1;
+				this.fetch.show[this.cur] = 2;
+				this.cur = id;
+			}, 
+			go : function(id) {
+				this.Dever.location('dream/view?id=' + this.id + '&content=' + id);
 			}
 		}
 	}

pages/dream/view/dream.vue

@@ -86,7 +86,7 @@
 		</view>
 		<view v-if="show">
 			<view class="page-num comment">评</view>
-			<view class="page-num select">选</view>
+			<view class="page-num select" @click="select">选</view>
 		</view>
 		
 		<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>
@@ -131,6 +131,9 @@ export default {
 	methods:{
 		setShow : function() {
 			this.show = !this.show;
+		},
+		select : function() {
+			this.Dever.location('dream/cate?id=' + this.item.info_id + '&parent_page=' + this.item.parent_page_id);
 		}
 	},
 	components:{