2021-05-14

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：本次主要用到了几个点：
1，scroll-view 可滚动视图区域
2，v-for 页面渲染数据
3，uni.request 请求数据
4，数组传参
界面如下：

---

一、左侧界面制作

1，在< template>中定义 < scroll-view class=“left”>.
在< script>中定义left：列表，归类列出需要的信息 。
2，在< view>中用v-for循环把left列表中title数据渲染到< text>界面上。
3，定义index检索变量，< view :class=“active===index?‘active’ :’’”>，
加上：把class定义成变量类，用active与index对比，相同则选中项变为红色
4，<view @click=“leftClickHandle(index,item.urle)”> 定义点击事件leftClickHandle，并在点击事件中传递参数index和urle。

<template>
		<scroll-view class="left">
			<view v-for="(item,index) in left" :key="index"
			@click="leftClickHandle(index,item.urle)"
			:class="active===index?'active' :''" >
			<text>{{item.title}}</text>
			</view>																
		</scroll-view>


<script>
            return {
				itemList:[],
			    active :1,
				left:[
					{
					    title: '状态信息',
						index:0,
						urle: ':6001/state',
				        },
					{
						title: '烹饪模式',
						index:1,
						urle:':6001/dishdata',
					    },
					
					{
						title: '烹饪结束',
					    index:2,
						urle:':6001/enddata',
						},
					
					{
						title: ' 确认烹饪',
						index:3,
						urle:'/confirm',
					    }
					
				]
			}
		
			
<style lang="scss">
		.left{
			width: 250rpx;
			height: 100%;
			border-right: 1px solid #eee;
			view{
				height: 60px;
				line-height: 60px ;
				color: #333;
				text-align: center;
				font-size: 40rpx;
				border-top: 1px solid #3F536E;
			}
			.active{
				background: #FFFFFF;
				color: #ff0000;
			}
			
		}

二、右侧界面制作

1,在点击事件leftClickHandle里添加uni.request事件，并且传递参数index和urle。leftClickHandle所在的< view>中含有v-for循环，遍历遍历并传递urle。
2,在uni.request事件中建立itemList:[]传参，在右边的< scroll-view>中用 v-for=“item in itemList”，遍历itemList中的数组，然后在< span>渲染到页面上。
3，在pics中用 display: flex; 让左右两个界面平行显示数据

<template>
		<scroll-view class="right" scroll-y>
			<view class="ite" v-for="item in itemList">
				<span>{{item}}</span>	
			</view>
		</scroll-view>



<script>
		 return {
				itemList:[],
			    active :1,
				left:[
					{
					    title: '状态信息',
						index:0,
						urle: ':6001/state',
				        },
					{
						title: '烹饪模式',
						index:1,
						urle:':6001/dishdata',
					    },
					
					{
						title: '烹饪结束',
					    index:2,
						urle:':6001/enddata',
						},
					
					{
						title: ' 确认烹饪',
						index:3,
						urle:'/confirm',
					    }
					
				]
			}
		},
		methods: {
			async leftClickHandle(index,urle){
				console.log(index),
				this.active=index,
				//获取右侧数据
				 console.log(urle);
				const res = await uni.request({
                 url: 'http://8.136.186.93'+urle,
                  success: (res) => {
                     console.log(res.data);
					 this.itemList =res.data;
                     console.log(this.itemList)
                 }
				})
			}
		},

代码如下（示例）：

<template>
	<view  class="pics">
		<scroll-view class="left">
			<view v-for="(item,index) in left" :key="index"
			@click="leftClickHandle(index,item.urle)"
			:class="active===index?'active' :''" >
			<text>{{item.title}}</text>
			</view>																
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="ite" v-for="item in itemList">
				<span>{{item}}</span>	
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList:[],
			    active :1,
				left:[
					{
					    title: '状态信息',
						index:0,
						urle: ':6001/state',
				        },
					{
						title: '烹饪模式',
						index:1,
						urle:':6001/dishdata',
					    },
					
					{
						title: '烹饪结束',
					    index:2,
						urle:':6001/enddata',
						},
					
					{
						title: ' 确认烹饪',
						index:3,
						urle:'/confirm',
					    }
					
				]
			}
		},
		methods: {
			async leftClickHandle(index,urle){
				console.log(index),
				this.active=index,
				//获取右侧数据
				 console.log(urle);
				const res = await uni.request({
                 url: 'http://8.136.186.93'+urle,
                  success: (res) => {
                     console.log(res.data);
					 this.itemList =res.data;
                     console.log(this.itemList)
                 }
				})
			}
		},
		onLoad() {
			 // this.getpicscate()
		}
	}
</script>

<style lang="scss">
	pages{
		height: 100%;
	}
    .pics{
		height: 100%;
		display: flex;
		.left{
			width: 250rpx;
			height: 100%;
			border-right: 1px solid #eee;
			view{
				height: 60px;
				line-height: 60px ;
				color: #333;
				text-align: center;
				font-size: 40rpx;
				border-top: 1px solid #3F536E;
			}
			.active{
				background: #FFFFFF;
				color: #ff0000;
			}
			
		}
	}
	.right{
		height: 100%;
		width:500rpx ;
		margin: 20 auto;
	
	   .ite {
		 text{
			font-size: 50rpx;

		 }
	   }
    }
</style>

---