Comment implémenter l'interaction cartographique pour l'envoi de l'emplacement dans le projet mobile Uni-App

Comment le terminal mobile d'uni-app peut-il imiter WeChat pour réaliser une interaction cartographique du lieu d'envoi ? L'article suivant vous présentera comment implémenter l'interaction cartographique. J'espère qu'il vous sera utile !

Le nouveau projet de l'entreprise doit avoir une carte intégrée, ou l'ancienne carte doit être révisée et une nouvelle carte doit être créée. L'interface utilisateur et l'interaction doivent être alignées sur WeChat, et la fonctionnalité doit répondre aux besoins de l'entreprise.

En fait, celles-ci sont assez simples. Le principal problème réside dans l'interaction de l'animation ci-dessous.

Mais parlons d'abord de mes regrets. J'ai suivi le didacticiel de la carte Tencent et je l'ai intégré au projet. Cependant, lors du débogage sur la vraie machine, j'ai constaté que je ne pouvais pas faire cela. J'avais prévu de le changer à nouveau et d'écrire un code HTML dans le projet, de l'introduire dans le projet via webview. webview引入到项目当中。

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

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

第一版试错

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

D'accord, j'espère que les lecteurs pourront prendre cela comme un avertissement.

Connectez-vous Parlons du développement de cette interaction.

Première version d'essais et d'erreurs

La première version consiste à utiliser uni-app pour obtenir la largeur et la hauteur de l'appareil. La largeur de la carte. remplit l'écran. Le contenu et la liste occupent chacun 50 % de la hauteur. Lorsque la liste est déclenchée pour se développer, ajustez le rapport de hauteur et ajoutez un effet de transition via l'attribut transition.

Mais le résultat est que lorsque le rapport de hauteur est automatiquement ajusté, la valeur de réglage de la hauteur elle-même est excessive et l'animation semble bloquée.

Pour parler franchement, ce n’est qu’un mot, moche.

ps : Le code suivant n'est qu'un concept de base, pas un véritable code exécutable, il peut être compris comme un pseudo-code

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

Deuxième version de l'idée

En fait, après avoir lu les idées dans le deuxième version, j'ai l'impression d'avoir vraiment perdu la tête et d'avoir pensé à faire la première version.

L'idée de​​la deuxième version est globalement la même que celle de la première version, les deux sont des réglages en hauteur, mais la différence est qu'il s'agit d'un mouvement global de vous avançant et moi de recul.

1. La hauteur du conteneur de liste représente 70 % et la hauteur du contenu représente 50 % de la hauteur totale. 70% est la hauteur dépliée.

2. Lorsque la liste est agrandie, la carte monte de 10 % et la liste monte de 20 %

Par rapport à la version précédente où le réglage de la hauteur provoquait le gel de l'animation finale, cette version ajuste le haut ; valeur.

La hauteur de la carte est toujours de 50 % et 20 % sont masqués après avoir élargi la liste.

La hauteur de la liste est toujours de 70 %. Après expansion, la déplacer vers le haut de 20 % couvrira une partie supplémentaire de la carte. À ce stade, le magasin du centre de la carte reste inchangé. Il n'est pas nécessaire de réacquérir le point central de la carte.

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

EnfinLe code du projet de l'entreprise, ce n'est pas facile de poster l'adresse du projet. Cette partie du code complet fait beaucoup. Si vous n'avez vraiment pas l'idée de l'implémenter, vous pouvez laisser un message dans. la zone de commentaires ou ajoutez les informations de contact pour une communication conviviale. Pas de publicité et sans frais.

🎜🎜Adresse originale : https://juejin.cn/post/7054700579590766628🎜🎜🎜Recommandé : "🎜tutoriel uniapp🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!