提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:本次主要用到了几个点:
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>