先给大家看看最终效果
首先我们来定义数据
data() {
return {
lsit: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
],
currentid: 0,
listint: [
{
id: 0,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
]
},
{
id: 1,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F3a%2F29%2F60%2F3a2960b898e721316bc92dd0fdc6754d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=3fc272f945bd648a12086a39f3ae7443',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1707%2Fe5%2Fdd96b024ca821cb5.jpg_r_720x480x95_250d3b8f.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=a249331590ed30d260e16c75ee719618'
]
},
{
id: 2,
list: [
'https://img2.baidu.com/it/u=2639139585,4174381006&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400'
]
},
{
id: 3,
list: [
''
]
},
{
id: 4,
list: [
''
]
},
{
id: 5,
list: [
''
]
},
{
id: 6,
list: [
''
]
},
{
id: 7,
list: [
''
]
},
{
id: 8,
list: [
''
]
},
{
id: 9,
list: [
''
]
},
{
id: 10,
list: [
''
]
},
{
id: 11,
list: [
''
]
}
],
Navigation: [
{
id: 0,
name: '推荐'
},
{
id: 1,
name: '最近'
},
{
id: 2,
name: '我的文件'
},
{
id: 3,
name: '任务'
},
{
id: 4,
name: '协同组'
},
{
id: 5,
name: '内部共享'
},
{
id: 6,
name: '外部共享'
},
{
id: 7,
name: '标签导航'
},
{
id: 8,
name: '回收站'
},
{
id: 9,
name: '资料库'
},
{
id: 10,
name: '沙箱白名单'
},
{
id: 11,
name: '空间资产'
}
]
}
},
lsit 是一个字符串数组 用于储存右侧图片暂时 数据存的都是图片路径
currentid 一个数字类型 用于存当前选中的数据id
listint 用于存储 对应导航栏数据的 外键id 和对应外键的图片路径
Navigation 用于存放导航栏的数据id
然后给大家看一下css样式
page{
height: 100%;
}
.min-app{
height: 100%;
display: flex;
}
.min-app .nav{
width: 200rpx;
height: 100%;
border-right: 1px solid #eee;
}
.min-app .nav view{
display: block;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
color: #333333;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.min-app .nav .current{
background-color: #b50e03;
color: #FFFFFF;
}
.dve{
flex: 1;
align-items: center;
display: flex;
flex-direction:column;
}
.dve image{
width: 90%;
height: 300rpx;
margin-top: 10px;
}
这就没什么好解释的了 如果你想改变当前选择的导航项的颜色 直接改current中的颜色就好了
再来看页面结构
<template>
<view class = "min-app">
<scroll-view class = "nav" scroll-y>
<view
v-for = "item in Navigation"
:key = "item.id"
:class="item.id == currentid?'current':''"
@click = "navSwitch(item.id)"
>
{
{ item.name }}
</view>
</scroll-view>
<view class = "dve">
<image v-for = "item in lsit" :key = "item":src = "item" v-if = "lsit"></image>
</view>
</view>
</template>
min-app是整个页面的支架 然后nav用了scroll-view组件 就是一个可自由滚动的组件 要注意 scroll-y属性是关键 分别有 scroll-y 和 scroll-x
scroll-y 代表支持 上下滚动
scroll-x 支持左右滚动
然后通过Navigation 循环在scroll-view中渲染view标签 key值是每一条数据的id 在每一个view中展示对应的name 值 给每个导航项中都加入一个点击事件 用于触发navSwitch 传入当前导航项的id
dve则是页面主体图片的展示区
通过lsit循环渲染image image 的路径src则代表每一个下标 都对应着一个图片的路径
这里这个v-if是在判断当前下班是否有图片路径 如果没有则元素直接不暂时 避免报图片找不到的错误
然后我们在methods中编写这个navSwitch函数
navSwitch(id){
this.currentid = id;
let lsit = this.listint.filter((e) => e.id == id);
this.lsit = lsit[0].list
}
先接收id参数 代表当前用户选择的导航id 然后通过id在listint中找出对应id相同的那一条数据
然后将取出的对应数据的list字段赋值给lsit 用于界面的主体展示
这样我们就可以达到最开始图片中的导航效果
全部代码如下
扫描二维码关注公众号，回复：
14229861 查看本文章
<template>
<view class = "min-app">
<scroll-view class = "nav" scroll-y>
<view
v-for = "item in Navigation"
:key = "item.id"
:class="item.id == currentid?'current':''"
@click = "navSwitch(item.id)"
>
{
{ item.name }}
</view>
</scroll-view>
<view class = "dve">
<image v-for = "item in lsit" :key = "item":src = "item" v-if = "lsit"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
lsit: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
],
currentid: 0,
listint: [
{
id: 0,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic118.nipic.com%2Ffile%2F20161216%2F24271963_122609717000_2.jpg&refer=http%3A%2F%2Fpic118.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923017&t=183ece148b13b64e9dd503afd1b15c91'
]
},
{
id: 1,
list: [
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F3a%2F29%2F60%2F3a2960b898e721316bc92dd0fdc6754d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=3fc272f945bd648a12086a39f3ae7443',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd1%2F1707%2Fe5%2Fdd96b024ca821cb5.jpg_r_720x480x95_250d3b8f.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656923347&t=a249331590ed30d260e16c75ee719618'
]
},
{
id: 2,
list: [
'https://img2.baidu.com/it/u=2639139585,4174381006&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400'
]
},
{
id: 3,
list: [
''
]
},
{
id: 4,
list: [
''
]
},
{
id: 5,
list: [
''
]
},
{
id: 6,
list: [
''
]
},
{
id: 7,
list: [
''
]
},
{
id: 8,
list: [
''
]
},
{
id: 9,
list: [
''
]
},
{
id: 10,
list: [
''
]
},
{
id: 11,
list: [
''
]
}
],
Navigation: [
{
id: 0,
name: '推荐'
},
{
id: 1,
name: '最近'
},
{
id: 2,
name: '我的文件'
},
{
id: 3,
name: '任务'
},
{
id: 4,
name: '协同组'
},
{
id: 5,
name: '内部共享'
},
{
id: 6,
name: '外部共享'
},
{
id: 7,
name: '标签导航'
},
{
id: 8,
name: '回收站'
},
{
id: 9,
name: '资料库'
},
{
id: 10,
name: '沙箱白名单'
},
{
id: 11,
name: '空间资产'
}
]
}
},
onLoad() {
},
methods: {
navSwitch(id){
this.currentid = id;
let lsit = this.listint.filter((e) => e.id == id);
this.lsit = lsit[0].list
}
}
}
</script>
<style>
page{
height: 100%;
}
.min-app{
height: 100%;
display: flex;
}
.min-app .nav{
width: 200rpx;
height: 100%;
border-right: 1px solid #eee;
}
.min-app .nav view{
display: block;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
color: #333333;
font-size: 30rpx;
border-top: 1px solid #eee;
}
.min-app .nav .current{
background-color: #b50e03;
color: #FFFFFF;
}
.dve{
flex: 1;
align-items: center;
display: flex;
flex-direction:column;
}
.dve image{
width: 90%;
height: 300rpx;
margin-top: 10px;
}
</style>