uni-app开发发送位置的地图交互
uni-app移动端怎么仿微信实现发送位置的地图交互?下面本篇文章就来给大家介绍一下实现地图交互的方法,希望对大家有所帮助!
公司新项目要内置一个地图,或者说旧地图要改版,搞一个新的地图,在UI和交互上要对齐微信,功能上贴合业务需求。
其实这些都挺简单的,主要麻烦的地方在于下面的动图交互。
不过先说悔不当初的点,我是按照腾讯地图教程内置在项目中,在浏览器中预览都是正常,但是在真机调试时,发现并不能这么做,打算再改下,写一个html在项目中,再通过webview
引入到项目当中。
好了,希望读者引以为戒。
接下来说说这个交互的开发吧。
第一版试错
第一版的做法是利用uni-app
的获取设备的宽高,地图宽度占满屏,内容与列表各占50%的高度,当触发展开列表时,调整高度占比并通过transition
属性添加过渡效果。
但是这样子做的结果就是, 当高度占比自动调整时,其本身就有过度式的其调整高度的值,动画看起来就是卡顿卡顿的。
说白了就是一个字,难看啊。
<template>
<view>
<view :style="{height: mapHeight 'px'}"> </view>
<view :style="{height: windowHeight - mapHeight 'px'}"></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>
第二版 突发奇想
其实第二版看完思路之后,就会觉得第一版真的是我失了智才会想那样去做。
第二版的思路和第一版整体一致,都是调整高度,但是不同是时,是你进我退式的整体移动。
一、列表容器高度占比70%,内容高度占总高度50%。 70%是展开后的高度。
二、展开列表时,地图向上移动10%,列表向上移动20%;
相比起上一版调整高度导致最终动画卡顿来说,这一版是调整top值。
地图高度始终是50%,展开列表后隐藏了20%。
列表高度始终是70%,展开后,向上移动20%就额外遮住了一部分的地图,此时地图中心店不变。不需要重新获取地图中心点。
<template>
<view>
<view :style="{height: windowHeight*0.5 'px', top: searchStatus ? '-10%' : 0 }"> </view>
<view :style="{height: windowHeight*0.7 'px', top: searchStatus ? '50%' : '30%'}">
<view :style="{height: searchStatus ? windowHeight*0.5 'px' :windowHeight*0.7 'px'}"></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>
最后
公司项目代码,不好贴项目地址, 这一部分完整的代码还是挺多的, 如果实在没有实现思路的朋友可以评论区留言,或者加联系方式友好交流,无广告,不收费。
原文地址:https://juejin.cn/post/7054700579590766628
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbkfa
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01