Bagaimana untuk melaksanakan lompat butang tersuai dalam Uniapp

Dengan pembangunan Internet mudah alih, pembangunan aplikasi mudah alih secara beransur-ansur menjadi topik hangat. Sebagai rangka kerja pembangunan merentas platform, Uniapp sangat popular dalam pembangunan aplikasi mudah alih. Hari ini kami akan memperkenalkan fungsi lompat butang tersuai dalam pembangunan Uniapp.

Fungsi penghalaan terbina dalam Uniapp boleh melompat antara halaman, tetapi jika anda perlu menambah berbilang butang tersuai pada halaman untuk melompat ke halaman yang berbeza, bagaimana untuk melaksanakannya? Di bawah ini kami akan menggunakan contoh untuk memperkenalkan cara melaksanakan lompatan butang tersuai dalam Uniapp.

Pertama, selepas membuat projek Uniapp, kita perlu mencipta dua halaman dalam folder halaman, iaitu indeks dan halaman1. Antaranya, indeks ialah halaman lalai, dan halaman1 ialah halaman yang perlu dilompat.

Dalam halaman indeks, kita perlu menambah dua butang tersuai, iaitu "Lompat ke halaman1" dan "Lompat ke halaman2". Kod khusus adalah seperti berikut:

<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>

Melalui kod di atas, kami berjaya menambah dua butang pada halaman dan melaksanakan fungsi mengklik butang untuk melompat ke halaman1 dan halaman2.

Akhir sekali, dalam halaman page1, kita boleh menambah butang kembali untuk kembali ke halaman indeks. Kod khusus adalah seperti berikut:

<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>

Melalui kod di atas, kami berjaya menambah butang kembali ke halaman page1 dan menyedari fungsi mengklik butang untuk kembali ke halaman indeks.

Ringkasnya, melalui kod sampel di atas, kami boleh berjaya melaksanakan fungsi lompat butang tersuai dalam Uniapp. Ini bukan sahaja menambah lebih interaktiviti pada aplikasi, tetapi juga meningkatkan pengalaman pengguna aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat butang tersuai dalam Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!