Detailed introduction to how uniapp sets up the global page

As the mobile application market continues to grow, more and more developers choose to use uniapp to develop their own applications, and setting global pages has become a part of development that cannot be ignored. This article will introduce in detail how uniapp sets up a global page to help developers easily implement globalization of applications.

First of all, we need to clarify what a global page is. Global pages refer to special pages that appear frequently in applications and are needed by almost all pages, such as the bottom navigation bar, etc. Setting a global page in uniapp can effectively improve the development efficiency of the application, and at the same time ensure the consistency and beauty of the application.

1. Setting the bottom navigation bar

Setting the bottom navigation bar is a commonly used global page setting in uniapp. Below we will take the settings of the bottom navigation bar as an example to explain in detail.

1. Create a new tabbar folder in the pages folder, and create four sub-pages under the folder: home, cart, category and mine.

2. Create a new tabbar folder under the static folder and put the bottom navigation bar icon you need to use into the folder.

3. Add the following code in App.vue:

<template>
  <div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import tabbar from &#39;@/components/tabbar.vue&#39;
export default {
  components: {tabbar}
}
</script>

First introduce the tabbar component in the code, and then reference the tabbar.vue component in the component.

4. Add the following code to tabbar.vue:

<template>
  <div>
    <ul>
      <li>
        <div>
          <img  src="/static/imghwm/default1.png" data-src="'/static/tabbar/home.png'" class="lazy" alt="Detailed introduction to how uniapp sets up the global page" >
        </div>
        <p>首页</p>
      </li>
      <li>
        <div>
          <img  src="/static/imghwm/default1.png" data-src="'/static/tabbar/category.png'" class="lazy" alt="Detailed introduction to how uniapp sets up the global page" >
        </div>
        <p>分类</p>
      </li>
      <li>
        <div>
          <img  src="/static/imghwm/default1.png" data-src="'/static/tabbar/cart.png'" class="lazy" alt="Detailed introduction to how uniapp sets up the global page" >
        </div>
        <p>购物车</p>
      </li>
      <li>
        <div>
          <img  src="/static/imghwm/default1.png" data-src="'/static/tabbar/mine.png'" class="lazy" alt="Detailed introduction to how uniapp sets up the global page" >
        </div>
        <p>个人中心</p>
      </li>
    </ul>
  </div>
</template>

Firstly define a ul in the code, and define four li in it, representing the four bottom navigation bars. icon icon. In each li, we set pictures and text respectively. The path of the image is /static/tabbar/. This path is relative to the static resource folder static. Developers can modify it accordingly according to their actual situation.

5. At this point, the bottom navigation bar has been set up. Developers can modify and beautify it according to their own needs. In actual development, developers can encapsulate the settings of the bottom navigation bar and then reference them in the pages they need to use.

2. Summary

Through the above examples, we can find that it is not difficult to set up a global page in uniapp. Developers only need to use the officially provided components and API accordingly. Just learn. In actual development, we recommend that developers practice and think more to improve their uniapp development level and create better applications.

The above is the detailed content of Detailed introduction to how uniapp sets up the global page. For more information, please follow other related articles on the PHP Chinese website!