Cara melaksanakan interaksi peta untuk menghantar lokasi dalam projek uni-apl mudah alih

Bagaimanakah terminal mudah alih uni-apl meniru WeChat untuk melaksanakan interaksi peta untuk menghantar lokasi? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan interaksi peta saya harap ia akan membantu anda!

Projek baharu syarikat harus mempunyai peta terbina dalam, atau peta lama perlu disemak dan peta baharu harus dibuat UI dan interaksi harus diselaraskan WeChat, dan fungsinya hendaklah selaras dengan keperluan perniagaan.

Sebenarnya, ini agak mudah Masalah utama terletak pada interaksi animasi di bawah.

Tetapi pertama-tama saya menyesalinya, saya telah membinanya ke dalam projek mengikut tutorial peta Tencent, dan pratonton dalam penyemak imbas adalah normal, tetapi apabila menyahpepijat pada mesin sebenar, saya mendapati ia tidak boleh selesai, dan saya merancang untuk menukarnya sekali lagi, menulis html dalam projek, dan kemudian memperkenalkannya ke dalam projek melalui webview.

Baiklah, saya harap pembaca akan ambil ini sebagai peringatan.

Mari kita bincangkan tentang perkembangan interaksi ini.

Percubaan dan ralat dalam versi pertama

Kaedah dalam versi pertama ialah menggunakan uni-app untuk mendapatkan lebar dan tinggi peranti Lebar peta menduduki skrin penuh, dan kandungan dan senarai masing-masing menduduki 50% daripada ketinggian Apabila senarai yang dikembangkan dicetuskan, laraskan nisbah ketinggian dan tambah kesan peralihan melalui atribut transition.

Tetapi hasil daripada ini ialah apabila nisbah ketinggian dilaraskan secara automatik, nilai pelarasan ketinggian itu sendiri adalah berlebihan, dan animasi kelihatan tersekat.

Secara terang-terangan, ia hanya satu perkataan, hodoh.

ps: Kod berikut hanyalah konsep teras, bukan kod boleh laku sebenar, dan boleh difahami sebagai kod pseudo;

<template>
    <view>
      <view :style="{height: mapHeight + &#39;px&#39;}"> </view>
      <view :style="{height: windowHeight - mapHeight + &#39;px&#39;}"></view>
    </view>
</teamplate>

export default {
  data(){
    return {
        windowWidth: uni.getSystemInfoSync().windowWidth,
windowHeight: uni.getSystemInfoSync().windowHeight,
        searchStatus: false,
    }
  },
  computed{
    mapHeight(){
      return searchStatus ? this.windowHeight * 0.7 : this.windowHeight * 0.5;
    }
  }
}

<style scoped>
.map-box,
.result-list{
  transition: height .3s;
}
</style>

Edisi Kedua A sesuka hati

Sebenarnya, selepas membaca idea dalam versi kedua, anda akan merasakan bahawa saya benar-benar hilang akal dan ingin melakukannya dalam versi pertama.

Idea versi kedua secara amnya sama dengan versi pertama, kedua-duanya melaraskan ketinggian, tetapi perbezaannya ialah ia adalah pergerakan keseluruhan anda maju dan saya berundur.

1. Senarai ketinggian bekas menyumbang 70%, dan ketinggian kandungan menyumbang 50% daripada jumlah ketinggian. 70% ialah ketinggian terbentang.

2. Apabila senarai dikembangkan, peta bergerak ke atas sebanyak 10% dan senarai bergerak ke atas sebanyak 20%

Berbanding dengan versi sebelumnya di mana melaraskan ketinggian menyebabkan animasi akhir untuk membekukan, ini Versi pertama adalah untuk melaraskan nilai teratas.

Ketinggian peta sentiasa 50% dan 20% disembunyikan apabila senarai dikembangkan.

Ketinggian senarai sentiasa 70%. Selepas pengembangan, mengalihkannya ke atas sebanyak 20% akan meliputi bahagian tambahan peta Pada masa ini, stor pusat peta kekal tidak berubah. Tidak perlu mendapatkan semula titik tengah peta.

<template>
    <view>
      <view :style="{height: windowHeight*0.5+&#39;px&#39;, top: searchStatus ? &#39;-10%&#39; : 0 }"> </view>
      <view :style="{height: windowHeight*0.7+&#39;px&#39;, top: searchStatus ? &#39;50%&#39; : &#39;30%&#39;}">
        <view :style="{height: searchStatus ? windowHeight*0.5+&#39;px&#39; :windowHeight*0.7+&#39;px&#39;}"></view>
      </view>
    </view>
</teamplate>

export default {
  data(){
    return {
        windowWidth: uni.getSystemInfoSync().windowWidth,
windowHeight: uni.getSystemInfoSync().windowHeight,
        searchStatus: false,
    }
  }
}

<style scoped>
.map-box,
.result-list{
  transition: height .3s;
}
</style>

Akhirnya

Kod projek syarikat sukar untuk menyiarkan alamat projek ini agak banyak jika anda benar-benar tidak mempunyai idea untuk dilaksanakan , anda boleh tinggalkan mesej di ruangan komen, atau tambah Hubungi kami untuk komunikasi mesra, tiada pengiklanan, tiada bayaran.

Alamat asal: https://juejin.cn/post/7054700579590766628

Disyorkan: "tutorial uniapp"

Atas ialah kandungan terperinci Cara melaksanakan interaksi peta untuk menghantar lokasi dalam projek uni-apl mudah alih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!