Bagaimana untuk melaksanakan fungsi carian bandar dalam uniapp

Cara melaksanakan fungsi carian bandar dalam uniapp

Dengan pembangunan aplikasi mudah alih, permintaan orang ramai terhadap lokasi geografi semakin tinggi. Dalam banyak aplikasi, fungsi carian bandar telah menjadi salah satu fungsi yang diperlukan. Artikel ini akan memperkenalkan cara melaksanakan fungsi carian bandar dalam uniapp dan melampirkan contoh kod yang sepadan.

1. Dapatkan data bandar

Untuk melaksanakan fungsi carian bandar, anda perlu mendapatkan data bandar terlebih dahulu. Data bandar masa nyata boleh diperoleh melalui antara muka rangkaian, atau data bandar boleh disimpan secara tempatan terlebih dahulu. Kod berikut ialah contoh yang menunjukkan cara untuk mendapatkan data bandar melalui antara muka rangkaian dan menyimpannya secara setempat:

<template>
  <view>
    <button @click="fetchCityData">获取城市数据</button>
  </view>
</template>

<script>
export default {
  methods: {
    fetchCityData() {
      uni.request({
        url: 'https://api.example.com/citydata',
        success: (res) => {
          uni.setStorage({
            key: 'cityData',
            data: res.data,
            success: () => {
              uni.showToast({
                title: '城市数据获取成功'
              })
            }
          })
        }
      })
    }
  }
}
</script>

Dalam kod di atas, permintaan rangkaian dihantar untuk mendapatkan data bandar melalui kaedah uni.request, dan data adalah disimpan dalam kaedah uni.setStorage Dalam bandarData tempatan. Selepas pemerolehan berjaya, gunakan kaedah uni.showToast untuk memberikan gesaan.

2. Laksanakan fungsi carian bandar

Selepas mendapatkan data bandar, anda boleh mula melaksanakan fungsi carian bandar. Kod berikut ialah contoh yang menunjukkan cara melaksanakan fungsi carian bandar dalam uniapp:

<template>
  <view>
    <input v-model="searchText" placeholder="请输入城市名称" @input="handleInput"/>
    <view v-show="showResult">
      <ul>
        <li v-for="city in searchResult" :key="city.id" @click="selectCity(city)">{{ city.name }}</li>
      </ul>
    </view>
  </view>
</template>

<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li {
    padding: 10px;
    background-color: lightgray;
    cursor: pointer;
  }
</style>

<script>
export default {
  data() {
    return {
      searchText: '',
      cityData: [],
      searchResult: [],
      showResult: false
    }
  },
  watch: {
    searchText() {
      this.showResult = true;
      if (this.searchText === '') {
        this.searchResult = [];
        this.showResult = false;
      } else {
        this.searchResult = this.cityData.filter(city => city.name.includes(this.searchText));
      }
    }
  },
  methods: {
    handleInput() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.searchResult = this.cityData.filter(city => city.name.includes(this.searchText));
      }, 300);
    },
    selectCity(city) {
      // 处理选中城市的逻辑
    }
  },
  mounted() {
    uni.getStorage({
      key: 'cityData',
      success: (res) => {
        this.cityData = res.data;
      }
    })
  }
}
</script>

Dalam kod di atas, teg input pertama kali ditakrifkan untuk memasukkan kata kunci carian, kemudian menggunakan atribut jam tangan untuk; memantau perubahan dalam SearchText dan penapis berdasarkan kata kunci yang dimasukkan mengendalikan acara input kotak input melalui kaedah handleInput, dan tetapkan pemasa untuk melaksanakan operasi carian jika tiada kata kunci baharu dimasukkan dalam masa 300 milisaat ;Akhirnya, dapatkan yang disimpan data bandar melalui kaedah uni.getStorage dalam fungsi kitaran hayat yang dipasang.

Dalam contoh ini, hasil carian akan dipaparkan dalam senarai di bawah, dan antara muka boleh dilaraskan dan data diproses mengikut keperluan.

3. Ringkasan

Melalui tutorial di atas, kita boleh melihat bagaimana untuk melaksanakan fungsi carian bandar dalam uniapp. Dengan mendapatkan data bandar dan penapisan berdasarkan kata kunci carian, fungsi carian bandar mudah boleh dilaksanakan. Sudah tentu, dalam aplikasi sebenar, algoritma carian dan interaksi antara muka juga boleh dioptimumkan mengikut keperluan untuk meningkatkan pengalaman pengguna.

Saya harap artikel ini akan membantu anda melaksanakan fungsi carian bandar dalam uniapp!

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