How to implement menu navigation and sidebar display in uniapp application

How UniApp applications implement menu navigation and sidebar display

UniApp is a cross-platform application development framework based on Vue.js, which can help developers use One set of code can simultaneously develop applications for multiple platforms, including iOS, Android, H5, etc. In UniApp applications, it is a common requirement to implement menu navigation and sidebar display. This article will introduce how to use UniApp to implement these two functions and provide specific code examples.

1. Menu navigation implementation

Menu navigation is mainly used to switch between different pages. In UniApp, we can use components provided by uni-ui or custom components to implement menu navigation. The following is a sample code that uses the TabBar component provided by uni-ui to implement bottom menu navigation:

<template>
  <view class="container">
    <TabBar v-model="activeIndex" :list="tabList" />
    <view class="content">
      <text v-show="activeIndex === 0">首页</text>
      <text v-show="activeIndex === 1">分类</text>
      <text v-show="activeIndex === 2">购物车</text>
      <text v-show="activeIndex === 3">我的</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0, // 当前选中的菜单索引
        tabList: [
          { iconPath: 'home.png', selectedIconPath: 'home-active.png', text: '首页' },
          { iconPath: 'category.png', selectedIconPath: 'category-active.png', text: '分类' },
          { iconPath: 'cart.png', selectedIconPath: 'cart-active.png', text: '购物车' },
          { iconPath: 'user.png', selectedIconPath: 'user-active.png', text: '我的' },
        ],
      };
    },
  };
</script>

<style>
  .container {
    height: 100vh;
  }
  .content {
    padding-top: 60px;
    text-align: center;
  }
</style>

In the above code, the TabBar component provided by uni-ui is used to implement bottom menu navigation. By binding the activeIndex variable, the corresponding content is displayed according to the selected menu.

2. Sidebar display implementation

Sidebar display is generally used to display various functional options or page navigation of the application. In UniApp, we can use components provided by uni-ui or custom components to implement sidebar display. The following is a sample code that uses the Drawer component provided by uni-ui to display the sidebar:

<template>
  <view>
    <Button @click="showSidebar">显示侧边栏</Button>
    <Drawer v-model="isShow" :overlay="true">
      <view class="sidebar">
        <view class="sidebar-item">我的订单</view>
        <view class="sidebar-item">我的收藏</view>
        <view class="sidebar-item">个人设置</view>
      </view>
    </Drawer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false, // 是否显示侧边栏
      };
    },
    methods: {
      showSidebar() {
        this.isShow = true;
      },
    },
  };
</script>

<style>
  .sidebar {
    width: 200px;
    height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;
  }
  .sidebar-item {
    margin-bottom: 20px;
  }
</style>

In the above code, by calling the display method of the Drawer component, click the button to display the sidebar. Inside the Drawer component, some sidebar options are displayed.

Through the above sample code, we can see that menu navigation and sidebar display in UniApp can be implemented simply and quickly with the help of components provided by uni-ui. Of course, you can also develop custom components according to your own needs.

Summary:

This article introduces how to implement menu navigation and sidebar display in UniApp, and provides specific code examples. I hope it will be helpful in developing the menu navigation and sidebar display of UniApp applications. Of course, in actual development, appropriate adjustments and expansions need to be made according to specific business needs. I wish everyone can develop powerful and user-friendly UniApp applications.

The above is the detailed content of How to implement menu navigation and sidebar display in uniapp application. For more information, please follow other related articles on the PHP Chinese website!