This is the second day of my participation in the First Challenge 2022

The foreword is the last word

The new project of the company should have a built-in map, or the old map should be revised and a new map should be created. The UI and interaction should be aligned with wechat, and the functions should meet the business needs.

It’s all pretty simple, but the main trouble lies in the GIF interaction below.

However, I regret the original point, I am in accordance with Tencent map tutorial built in the project, in the browser preview is normal, but in the real machine debugging, found that can not do so, I plan to change, write an HTML in the project, and then through the Webview into the project.

All right, I hope readers take warning.

Let’s talk about the development of this interaction.

First edition trial and error

The first version uses uni-App to get the width and height of the device. The map takes up half of the screen width, and the content and the list each occupy 50% of the height. When the list is triggered to expand, adjust the ratio of the height and add the transition effect through the transition attribute.

But the result of this is that when the height ratio is automatically adjusted, there is an overexpression of the value of the adjusted height, and the animation looks stuck and stuck.

In plain English, it’s one word. It’s ugly.

Ps: The following code is only a core concept, not real executable code, can be understood as a pseudo-code;

<template> <view> <view class="map-box" :style="{height: mapHeight + 'px'}"> </view> <view class="result-list" :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 lang="scss" scoped> .map-box, .result-list{ transition: height .3s; } </style>Copy the code

Second edition on a whim

In fact, after reading the second version of the idea, I will feel that the first version is really insane to want to do that.

The second version of the idea and the first version of the overall same, are to adjust the height, but the difference is that you advance and I retreat type of the overall movement.

The height of the list container accounts for 70%, and the height of the content accounts for 50% of the total height. 70% is the height of the expansion.

2. When expanding the list, the map moves up 10% and the list moves up 20%.

Compared to the previous version of the adjustment of the height resulting in the final animation stuck, this version is to adjust the top value.

Map height is always 50%, hide 20% when expanding list.

The list height is always 70%, and when expanded, moving up 20% covers an additional portion of the map, leaving the center of the map unchanged. There is no need to retrieve the center of the map.

<template> <view> <view class="map-box" :style="{height: windowHeight*0.5+'px', top: searchStatus? </view> <view class="result-list" :style="{height: windowHeight*0.7+'px', top: searchStatus? '50%' : '30%'}"> <view class="result" :style="{height: searchStatus ? WindowHeight *0.5+'px' :windowHeight*0.7+'px'}"></view> </view> </view> </view> </teamplate> export default {data(){return { windowWidth: uni.getSystemInfoSync().windowWidth, windowHeight: uni.getSystemInfoSync().windowHeight, searchStatus: false, } } } <style lang="scss" scoped> .map-box, .result-list{ transition: height .3s; } </style>Copy the code

The last

Company project code, not good post project address, this part of the complete code is quite a lot, if there is no way to realize the idea of friends can leave a message in the comment area, or contact friendly communication, no advertising, no charge.