Use uniapp to implement full-screen sliding navigation function

Use uniapp to implement full-screen sliding navigation function

In mobile development, full-screen sliding navigation is a common interaction method that can provide a good user experience. uniapp is a cross-platform framework based on Vue.js that can easily implement full-screen sliding navigation functions. This article will introduce how to use uniapp to implement full-screen sliding navigation and provide specific code examples.

First, we need to create a uniapp project. You can use HBuilderX to create it, or you can use the Vue CLI to create a new Vue project and convert it into a uniapp project.

After creating the project, we need to create two pages under the pages folder: navigation.vue and home.vue. Among them, navigation.vue will be used to display the navigation bar, and home.vue will be used to display the content page.

The following is a code example for navigation.vue:

<template>
  <view class="navigation">
    <scroll-view class="navigation-list" scroll-x>
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="navigation-item"
        :class="{ 'active': activeIndex === index }"
      >
        <text class="item-text">{{ item }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字
      activeIndex: 0, // 当前选中的导航项索引
    };
  },
};
</script>

<style>
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  z-index: 999;
}

.navigation-list {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.navigation-item {
  display: inline-block;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

.item-text {
  color: #000000;
}

.active {
  color: #ff0000;
}
</style>

In the above code, we added the scroll-x attribute on the scroll-view component to enable horizontal scrolling. Use the v-for command to render each option of the navigation bar, bind the active class name through :class, and switch styles according to the currently selected navigation item index.

Next, we need to implement the function of sliding to switch pages in home.vue. The following is a code example of home.vue:

<template>
  <view class="home">
    <swiper class="swiper-box" @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in navList" :key="index">
        <view class="swiper-item">
          <text>{{ item }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: ["首页", "分类", "购物车", "我的"], // 导航栏显示的文字
      activeIndex: 0, // 当前选中的导航项索引
    };
  },
  methods: {
    handleSwiperChange(event) {
      this.activeIndex = event.detail.current;
    },
  },
};
</script>

<style>
.home {
  margin-top: 50px;
}

.swiper-box {
  width: 100%;
  height: 100%;
}

.swiper-item {
  height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.text {
  font-size: 36px;
}
</style>

In the above code, we use the swiper component to wrap the swiper-item to achieve the effect of sliding to switch pages. By listening to the change event of the swiper component, the currently selected navigation item index is updated, and the content page is rendered using the v-for directive.

Finally, introduce navigation and home components in App.vue, and set the height of the page to 100% in the global style. The following is a code example of App.vue:

<template>
  <view class="container">
    <navigation />
    <router-view />
  </view>
</template>

<script>
import navigation from "@/pages/navigation.vue";

export default {
  components: {
    navigation,
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>

At this point, we have completed the code writing to implement the full-screen sliding navigation function using uniapp. The sliding effect of the navigation bar is achieved through the scroll-view component in navigation.vue, and the switching effect of the content page is achieved through the swiper component in home.vue.

Summary: The uniapp framework can be used to easily implement the full-screen sliding navigation function. It can be completed with the help of scroll-view and swiper components, combined with corresponding styles and logical processing. I hope this article can be helpful to developers who are new to uniapp.

The above is the detailed content of Use uniapp to implement full-screen sliding navigation function. For more information, please follow other related articles on the PHP Chinese website!