1. 什么是uniapp
Uniapp是一款基于Vue.js开发的跨平台应用开发框架，可同时支持多个平台的应用开发，包括iOS、Android、Web、微信小程序、支付宝小程序等，其开发模式是一套代码，多端运行，节约开发成本，提高开发效率。
2.侧边导航栏是什么
侧边导航栏是一种常见的网站或移动应用界面设计模式，通过在网页或移动应用的一侧设置可滑动的面板，来显示跟当前浏览页面相关的导航信息，让用户能够快速浏览并访问相关内容。
3.unnapp怎样做侧边导航栏
3.1 安装uniapp
首先需要安装uniapp，安装方式如下：
npm install -g @vue/cli3.2 创建uniapp项目
使用Vue CLI 3 创建Uniapp项目，具体步骤如下：
创建项目文件夹，并在文件夹中打开命令行窗口;
输入如下命令：
vue create -p dcloudio/uni-preset-vue my-project其中 -p dcloudio/uni-preset-vue 是指定使用uni-preset-vue这个预设模板创建uni-app（这里所说的预设模板，可以理解为一堆配置文件和初始化文件集）。
3.3 新建uniapp页面
在步骤 3.2 创建完项目后，需要新建uniapp页面进行开发，具体步骤如下：
在项目中创建一个新的页面，如：Nav.vue。在ststic文件夹中准备好所需的图片资源，例如icon、背景图、标题等素材;
在 Nav.vue 页面中，使用 “uni-view” 组件创建一个盛放整个导航菜单的容器，如下：
//Nav.vue
<template>
<view class='nav-container'>
<!-- Todo: 导航菜单内容 -->
</view>
</template>
<style>
/* Todo: 导航菜单的样式 */
</style>
通过以上代码片段，已经可以在 Nav.vue 中创建一个基本的导航菜单的框架结构，但是目前菜单并没有任何实际内容。接着需要在前面的代码中添加进一些内容和样式，完成导航菜单的具体设计。
3.4 添加菜单内容与样式
接下来需要在 Nav.vue 的模板中增加一些具体的菜单内容和样式，并对菜单的布局和内容进行调整，如下:
//Nav.vue
<template>
<view class='nav-container'>
<view class='nav-header'>
<image class='nav-logo' :src='/static/img/logo.png' />
<view class='nav-title'>My App</view>
</view>
<view class='nav-items'>
<view class='nav-item' @click='gotoHome'>
<image class='nav-item-icon' :src='/static/img/home.png' />
<view class='nav-item-text'>主页</view>
</view>
<view class='nav-item' @click='gotoNews'>
<image class='nav-item-icon' :src='/static/img/news.png' />
<view class='nav-item-text'>新闻</view>
</view>
<view class='nav-item' @click='gotoAbout'>
<image class='nav-item-icon' :src='/static/img/about.png' />
<view class='nav-item-text'>关于</view>
</view>
<view class='nav-item' @click='gotoContact'>
<image class='nav-item-icon' :src='/static/img/contact.png' />
<view class='nav-item-text'>联系</view>
</view>
</view>
</view>
</template>
<style>
/* Todo: 导航菜单的样式 */
.nav-container {
position: fixed;
top: 0;
left: 100vw;
width: 80%;
height: 100vh;
background-color: #f0f1f5;
overflow-x: hidden;
overflow-y: auto;
transition: left .3s ease-out;
}
.nav-header {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 20px;
font-size: 20px;
color: #2085ca;
background-color: #f5f5f7;
}
.nav-logo {
width: 50px;
height: 50px;
}
.nav-title {
margin-left: 20px;
}
.nav-items {
padding: 20px;
}
.nav-item {
display: flex;
flex-direction: row;
margin: 20px 0px;
cursor: pointer;
transition: background-color .3s ease-out;
}
.nav-item:hover {
background-color: #e6e7ee;
}
.nav-item-icon {
width: 30px;
height: 30px;
}
.nav-item-text {
margin-left: 12px;
font-size: 16px;
color: #333;
}
</style>
在上述代码中，实现了以下功能:
整个导航菜单包含一个 Header 和菜单 Item 两个区域的结构;
在视觉上，导航菜单从屏幕右侧滑动进入屏幕;
Header 部分显示了网站或 App 的 logo 和名称，使得菜单的视觉统一性更加强;
Item 部分的样式，每个菜单 Item 包含一个 icon 和一个文本描述，并且具有 hover 状态下的背景色高亮效果;
通过事件绑定，点击菜单项将可以跳转到对应的页面。
3.5 给菜单设定动画效果
最后一步就是进行菜单的动画效果设置，在菜单组件上添加一个 transition 的属性值，实现菜单的滑动功能，具体实现如下:
//Nav.vue
<template>
<view class='nav-container' :style='{ left: isShow ? "20vw" : "100vw" }'>
<view class='nav-header'>
<image class='nav-logo' :src='/static/img/logo.png' />
<view class='nav-title'>My App</view>
<image class='nav-close' :src='/static/img/close.png' @click='toggleShow' />
</view>
<view class='nav-items'>
<view class='nav-item' @click='gotoHome'>
<image class='nav-item-icon' :src='/static/img/home.png' />
<view class='nav-item-text'>主页</view>
</view>
<view class='nav-item' @click='gotoNews'>
<image class='nav-item-icon' :src='/static/img/news.png' />
<view class='nav-item-text'>新闻</view>
</view>
<view class='nav-item' @click='gotoAbout'>
<image class='nav-item-icon' :src='/static/img/about.png' />
<view class='nav-item-text'>关于</view>
</view>
<view class='nav-item' @click='gotoContact'>
<image class='nav-item-icon' :src='/static/img/contact.png' />
<view class='nav-item-text'>联系</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShow: false
}
},
methods: {
toggleShow() {
this.isShow = !this.isShow;
},
gotoHome() {
uni.navigateTo({
url: '/pages/home/home'
})
},
gotoNews() {
uni.navigateTo({
url: '/pages/news/news'
})
},
gotoAbout() {
uni.navigateTo({
url: '/pages/about/about'
})
},
gotoContact() {
uni.navigateTo({
url: '/pages/contact/contact'
})
}
}
}
</script>
<style>
/* Todo: 导航菜单的样式 */
.nav-container {
position: fixed;
top: 0;
left: 100vw;
width: 80%;
height: 100vh;
background-color: #f0f1f5;
overflow-x: hidden;
overflow-y: auto;
transition: left .3s ease-out;
}
.nav-container.show {
left: 20vw;
}
.nav-header {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 20px;
font-size: 20px;
color: #2085ca;
background-color: #f5f5f7;
}
.nav-logo {
width: 50px;
height: 50px;
}
.nav-title {
margin-left: 20px;
}
.nav-close {
width: 30px;
height: 30px;
margin-left: auto;
}
.nav-items {
padding: 20px;
}
.nav-item {
display: flex;
flex-direction: row;
margin: 20px 0px;
cursor: pointer;
transition: background-color .3s ease-out;
}
.nav-item:hover {
background-color: #e6e7ee;
}
.nav-item-icon {
width: 30px;
height: 30px;
}
.nav-item-text {
margin-left: 12px;
font-size: 16px;
color: #333;
}
</style>
通过以上代码片段，已经可以实现从右侧滑入菜单，滑出菜单，并且有 hover 状态下的菜单高亮。
总结
在以上的步骤中，我们使用了 uniapp 框架，创建了一个具有导航菜单的完整页面，并且设置了动画效果。经过这么多步骤，我们终于完成了一个类似于 App 自带导航菜单和网站 Side Navigation 的效果。希望通过这篇文章的帮助，读者可以迅速掌握uniapp实现侧边导航菜单的方法。