Gunakan uniapp untuk melaksanakan fungsi pemilih bandar

Menggunakan uniapp untuk melaksanakan fungsi pemilih bandar memerlukan contoh kod khusus

Dengan perkembangan pesat Internet mudah alih, permintaan orang ramai untuk fungsi pemilih bandar yang mudah juga meningkat. Fungsi ini boleh dilaksanakan dengan mudah menggunakan uniapp Contoh kod khusus diberikan di bawah.

Pertama, kita perlu menyediakan komponen pemilih bandar. Dalam uniapp, kita boleh menggunakan komponen pemilih Pemilih untuk melaksanakan fungsi pemilih bandar. Tambahkan kod berikut pada templat:

<template>
  <view class="container">
    <picker mode="multiSelector" :value="defaultCity" @change="onChange">
      <view class="picker">
        {{city[0][defaultCity[0]]}}-{{city[1][defaultCity[1]]}}-{{city[2][defaultCity[2]]}}
      </view>
    </picker>
  </view>
</template>

Dalam bahagian skrip, kita perlu menentukan data bandar dan bandar pilihan lalai. Anda boleh menambah kod berikut pada data:

<script>
export default {
  data() {
    return {
      defaultCity: [0, 0, 0], // 默认选中城市
      city: [['北京市', '上海市', '广州市', '深圳市'], ['朝阳区', '徐汇区', '天河区', '福田区'], ['三里屯', '淮海路', '天河城', '华强北']]
    }
  },
  methods: {
    onChange(e) {
      this.defaultCity = e.detail.value; // 更新选择的城市
      console.log('选择的城市：', this.city[0][this.defaultCity[0]], this.city[1][this.defaultCity[1]], this.city[2][this.defaultCity[2]]);
    }
  }
}
</script>

Seperti yang anda lihat, kami telah mentakrifkan bandar tatasusunan dua dimensi data bandar, di mana setiap dimensi mewakili tahap pemilihan. Contohnya, dimensi pertama mewakili wilayah, dimensi kedua mewakili kawasan bandar dan dimensi ketiga mewakili jalan tertentu. Bandar yang kami pilih secara lalai ialah defaultCity dan kami menggunakan kaedah onChange untuk mengemas kini bandar yang dipilih dan mencetaknya.

Akhir sekali, rancakkan pemilih bandar kami dengan menambah gaya. Tambahkan kod berikut dalam gaya:

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.picker {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
</style>

Kod di atas mentakrifkan gaya bekas dan pemilih, menjadikan pemilih bandar kelihatan lebih cantik.

Melalui contoh kod di atas, kami berjaya melaksanakan fungsi pemilih bandar mudah menggunakan uniapp. Sudah tentu, data bandar boleh diubah suai mengikut keperluan sebenar, seperti mendapatkan data bandar secara dinamik daripada antara muka. Semoga contoh ini akan membantu anda melaksanakan fungsi pemilih bandar yang lebih kompleks.

Atas ialah kandungan terperinci Gunakan uniapp untuk melaksanakan fungsi pemilih bandar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!