uni-app 实现商城分类页

￡神魔★判官ぃ 2023-01-04 13:25 186阅读 0赞

<template>
    	<view>
    		<view class="search">
    			<view class="searchBox">
    				<navigator url="#">
    					<image src="../../static/search.png" mode=""></image>
    					搜索全部
    				</navigator>
    			</view>
    		</view>
    		<view class="cart">
    			<view class="cartLeft">
    				<scroll-view class="cartNameLeft" scroll-y="true" :scroll-top="scrollTop">
    					<view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)"> 
    						{ { item.catename}}
    						<view class="cateLine"></view>
    					</view>
    				</scroll-view>
    			</view>
    			<view class="cartRight">
    				<scroll-view class="cartRightScroll" scroll-y="true" :scroll-into-view = "'cate'+mainCurrent" scroll-with-animation="true" @scroll="rightScorll">
    					<view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index">
    						<view class="cartRightTitle">
    							——<text>{ { item.catename}}</text>——
    						</view>
    						<view class="catrRightList">
    							<view class="catrRightItem" v-for="(child,index) in item.product" :key="index">
    								<image :src="imgUrl+child.mainimage" mode=""></image>
    								<text>{ { child.smalltitle}}</text>
    							</view>
    							<view class="clearFix"></view>
    						</view>
    					</view>
    				</scroll-view>	
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				cate:[],
    				current:0,
    				rectInfo:[],
    				mainCurrent:0,
    				scrollTop:0
    			}
    		},
    		onLoad() { 
    			this.getData()
    		},
    		mounted() { 
    			setTimeout(()=>{ 
    				this.getRectInfo()
    			},200)
    			
    		},
    		methods: { 
    			getData() { 
    				uni.request({ 
    				    url: '/api/index/cate',
    				    success: (res) => { 
    						this.cate = res.data.data;
    				        console.log(res.data.data);
    				    }
    				});
    			},
    			// 菜单选择
    			menuTab(index) { 
    				this.current = index
    				this.mainCurrent = index
    				this.scrollTop = index*uni.upx2px(100)
    				console.log(uni.upx2px(100));
    			},
    			// 获取元素的top bottom值 
    			getRectInfo() { 
    				var top = 0;
    				var bottom = 0;
    				var temp = 0;
    				for(var i =0; i < this.cate.length; i++) { 
    					// 通过id获取元素位置元素
    					let view = uni.createSelectorQuery().in(this).select("#cate"+i);
    					
    					view.fields({ 
    					  // 返回节点尺寸（width height）
    					  size: true,
    					  // 返回节点的 scrollLeft scrollTop
    					  scrollOffset: true
    					}, data => { 
    						console.log(data);
    						top = temp;
    						bottom = temp + data.height;
    						temp += data.height;
    						this.rectInfo[i] = { 'top': top,'bottom' : bottom}
    					}).exec();
    				}
    			},
    			//添加滚动事件
    			rightScorll(e) { 
    				var scrollTop = e.detail.scrollTop;
    				for(var i = 0; i < this.rectInfo.length; i++) { 
    					if( scrollTop > this.rectInfo[i].top && scrollTop < this.rectInfo[i].bottom) { 
    						this.current = i
    						this.scrollTop = i*uni.upx2px(100)
    						console.log(this.scrollTop);
    					}
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    	page { 
    		background: #f7f7f7;
    	}
    	
    	.search { 
    		height: 110rpx;
    		width: 100%;
    		background: #fff;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	}
    	.searchBox { 
    		width: 690rpx;
    		height: 70rpx;
    		border-radius: 10rpx;
    		font-size: 28rpx;
    		color: #999;
    		background: #f7f7f7;
    		
    	}
    	.searchBox image { 
    		width: 38rpx;
    		height: 38rpx;
    		margin-right: 12rpx;
    	}
    	.searchBox navigator { 
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		height: 70rpx;
    	}
    	.cart { 
    		position: absolute;
    		top: 120rpx;
    		bottom: 0;
    		width: 100%;
    		background: red;
    		display: flex;
    	}
    	.cartLeft { 
    		width: 200rpx;
    		background: #f7f7f7;
    		height: 100%;
    	}
    	.cartNameLeft { 
    		height: 100%;
    	}
    	.cartNameItem { 
    		font-size: 28rpx;
    		color: #000;
    		line-height: 100rpx;
    		text-align: center;
    		position: relative;
    	}
    	.cateActive { 
    		background: #fff;
    	}
    	.cateLine { 
    		position: absolute;
    		width: 4px;
    		height: 30rpx;
    		background: #f7f7f7;
    		top: 35rpx;
    	}
    	.cateActive .cateLine { 
    		background: #ba15b8f9;
    	}
    	.cartRight { 
    		width: 550rpx;
    		background: #fff;
    	}
    	.cartRightScroll { 
    		height: 100%;
    		padding-bottom: 20rpx;
    	}
    	.cartRightTitle { 
    		line-height: 86rpx;
    		padding-top: 16rpx;
    		color: #999;
    		font-size: 28rpx;
    		text-align: center;
    	}
    	.cartRightTitle text{ 
    		padding: 0 30rpx;
    	}
    	.catrRightItem { 
    		width: 33.33%;
    		float: left;
    		margin-top: 20rpx;
    	}
    	.catrRightItem image { 
    		width: 160rpx;
    		height: 160rpx;
    		display: block;
    		margin: 0 auto;
    	}
    	.catrRightItem text { 
    		line-height: 36rpx;
    		font-size: 24rpx;
    		text-align: center;
    		display: block;
    		width: 100%;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		white-space: nowrap;
    	}
    	.clearFix { 
    		clear: both;
    	}
    </style>