So implementieren Sie die Karteninteraktion zum Senden des Standorts in einem mobilen Uni-App-Projekt

Wie kann das mobile Endgerät der Uni-App WeChat imitieren, um die Karteninteraktion des Sendestandorts zu realisieren? Im folgenden Artikel erfahren Sie, wie Sie die Karteninteraktion implementieren. Ich hoffe, dass er Ihnen weiterhilft!

Das neue Projekt des Unternehmens sollte über eine integrierte Karte verfügen, oder die alte Karte sollte überarbeitet und eine neue Karte erstellt werden. Die Benutzeroberfläche und die Interaktion sollten auf WeChat abgestimmt sein und die Funktionalität sollte den Geschäftsanforderungen entsprechen.

Eigentlich sind diese ganz einfach. Das Hauptproblem liegt in der Animationsinteraktion unten.

Aber lassen Sie uns zuerst über mein Bedauern sprechen. Ich habe das Tencent-Karten-Tutorial befolgt und es in das Projekt integriert. Beim Debuggen auf dem realen Computer stellte ich jedoch fest, dass ich dies nicht tun konnte. Ich hatte vor, es erneut zu ändern und ein HTML zu schreiben. Führen Sie es im Projekt über webview in das Projekt ein. webview引入到项目当中。

好了，希望读者引以为戒。

接下来说说这个交互的开发吧。

第一版试错

第一版的做法是利用uni-app的获取设备的宽高，地图宽度占满屏，内容与列表各占50%的高度，当触发展开列表时，调整高度占比并通过transition

Okay, ich hoffe, die Leser können das als Warnung verstehen.

Verbinden Lassen Sie uns über die Entwicklung dieser Interaktion sprechen.

Erste Version von Versuch und Irrtum

Die erste Version besteht darin, uni-app zu verwenden, um die Breite und Höhe des Geräts zu ermitteln Der Inhalt und die Liste nehmen jeweils 50 % der Höhe ein. Wenn die Liste erweitert wird, passen Sie das Höhenverhältnis an und fügen Sie einen Übergangseffekt über das Attribut transition hinzu.

Dies führt jedoch dazu, dass bei der automatischen Anpassung des Höhenverhältnisses der Höhenanpassungswert selbst zu hoch ist und die Animation hängen bleibt.

Um es ganz klar auszudrücken: Es ist nur ein Wort: hässlich.

ps: Der folgende Code ist nur ein Kernkonzept, kein wirklich ausführbarer Code, er kann als Pseudocode verstanden werden;

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

Zweite Version der Idee

Tatsächlich nach dem Lesen der Ideen in der zweiten Ich habe das Gefühl, dass ich wirklich den Verstand verloren habe und darüber nachgedacht habe, die erste Version zu machen.

Die Idee der zweiten Version ist im Allgemeinen die gleiche wie die der ersten Version, bei beiden handelt es sich um Höhenverstellungen, aber der Unterschied besteht darin, dass es sich um eine Gesamtbewegung handelt, bei der Sie vorrücken und ich mich zurückziehe.

1. Die Höhe des Listencontainers macht 70 % und die Höhe des Inhalts 50 % der Gesamthöhe aus. 70 % ist die ausgeklappte Höhe.

2. Beim Erweitern der Liste verschiebt sich die Karte um 10 % und die Liste um 20 %. Im Vergleich zur vorherigen Version, bei der die endgültige Animation einfriert, wird in dieser Version der obere Wert angepasst .

Die Kartenhöhe beträgt immer 50 % und 20 % werden nach dem Erweitern der Liste ausgeblendet.

Die Höhe der Liste beträgt immer 70 %. Wenn Sie sie um 20 % nach oben verschieben, wird ein zusätzlicher Teil der Karte abgedeckt. Der Speicher in der Kartenmitte bleibt unverändert. Es ist nicht erforderlich, den Kartenmittelpunkt erneut zu erfassen.

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

Der Projektcode des Unternehmens, es ist nicht einfach, die Projektadresse zu veröffentlichen. Wenn Sie wirklich keine Idee haben, ihn umzusetzen, können Sie eine Nachricht hinterlassen den Kommentarbereich oder fügen Sie die Kontaktinformationen für eine freundliche Kommunikation hinzu.

Ursprüngliche Adresse: https://juejin.cn/post/7054700579590766628

Empfohlen: „🎜uniapp-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Karteninteraktion zum Senden des Standorts in einem mobilen Uni-App-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!