九 pages/tabbar/list.vue

<template>
	<view class='list'>
		<view class='search'>
			<search 
				placeholder='搜索类型' 
				v-model='keyword'
				@change='onChange'
			>
				<view slot='left'>你好</view>
			</search>
		</view>
		
		<view class="list-main" :style="'height:'+height+'px;'">
			<view class='list-l'>
				<scroll-view scroll-y="true" :style="'height:'+height+'px;'"> 
					<view>
						<view v-for='item in lData' :key='item.id' class='main-l' @click='tabClick(item.id)'>
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class='list-r'>
				<view v-for='item in goodsList' :key='item.id'>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import search from '@/components/search'
import { categoryTree  , categoryList } from '@/utils/api/goods.js'
export default{
	data () {
		return {
			keyword:'',
			height:0,
			lData:[],
			goodsList:[]
		}
	},
	async onLoad() {
		let res = await categoryTree();
		//l数据
		this.lData = res.data;
		
		this.getRlist( -1 ); 
	},
	onReady() {
		let sHeight = 0;
		let that = this;
		let dom = uni.createSelectorQuery().select('.search');
		dom.boundingClientRect( data=>{
			sHeight = data.height;
		}).exec();
		
		//获取可视区域高度
		uni.getSystemInfo({
			success( res ){
				that.height = res.windowHeight - sHeight - sHeight;
			}
		})
		
	},
	components:{
		search
	},
	methods:{
		//输入框内容发生变化时触发
		onChange( e ){
			console.log('分类list.vue', e );
		},
		//右侧列表数据
		async getRlist( params ){
			let res = await categoryList( params );
			this.goodsList = res.data;
		},
		tabClick( id ){
			this.getRlist( id );
		}
	}
}
</script>

<style>
.list{
	width:100%;
	height: 100%;
	overflow: hidden;
}
.search{
	width:100%;
	height:66rpx;
}
.list-main{
	display: flex;
}
.list-l{
	width:150rpx;
	background: #ccc;
	overflow: hidden;
}
.main-l{
	width:150rpx;
	line-height: 100rpx;
	background: #ccc;
	overflow: hidden;
	white-space: nowrap;
}
</style>