How to implement custom button jump in Uniapp

With the development of mobile Internet, mobile application development has gradually become a hot topic. As a cross-platform development framework, Uniapp is very popular in the development of mobile applications. Today we will introduce the custom button jump function in Uniapp development.

Uniapp’s built-in routing function can jump between pages, but if you need to add multiple custom buttons to the page to jump to different pages, how to implement it? Below we will use an example to introduce how to implement custom button jumps in Uniapp.

First, after creating the Uniapp project, we need to create two pages in the pages folder, namely index and page1. Among them, index is the default page, and page1 is the page that needs to be jumped to.

In the index page, we need to add two custom buttons, namely "Jump to page1" and "Jump to page2". The specific code is as follows:

<template>
  <view class="container">
    <view class="btns">
      <view class="btn" @click="toPage1">跳转到page1页面</view>
      <view class="btn" @click="toPage2">跳转到page2页面</view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      toPage1() {
        uni.navigateTo({
          url: '/pages/page1/page1'
        })
      },
      toPage2() {
        uni.navigateTo({
          url: '/pages/page2/page2'
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .btns {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

Through the above code, we successfully added two buttons to the page and implemented the function of clicking the button to jump to page1 and page2.

Finally, in the page1 page, we can add a return button to return to the index page. The specific code is as follows:

<template>
  <view class="container">
    <view class="title">这是page1页面</view>
    <view class="btn" @click="back">返回</view>
  </view>
</template>

<script>
  export default {
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
  }
  .btn {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

Through the above code, we successfully added the return button to the page1 page and realized the function of clicking the button to return to the index page.

To sum up, through the above sample code, we can successfully implement the custom button jump function in Uniapp. This not only adds more interactivity to the application, but also improves the user experience of the application.

The above is the detailed content of How to implement custom button jump in Uniapp. For more information, please follow other related articles on the PHP Chinese website!