<cover-view class="bottom-view-inter" style="">
<cover-view class="buttom-view-icon-button" @click="moveTolocation">
<cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
</cover-view>
<cover-view class="bottom-view-button" style="">
</cover-view>
<cover-view class="buttom-view-icon-button" @click="moveTolocation">
<cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
</cover-view>
</cover-view>
.bottom-view-inter {
position: fixed;
bottom:75rpx;
width: 100%;
display:flex;
align-items: center;
justify-content: space-around;
}
效果如下:
我们可以发现弹性盒布局已经失效了,那么我们如何解决这个问题呢?
其实很简单,只需要在cover-view的外面再套一个盒子就可以了。然后外层盒子使用定位,内层盒子正常使用弹性盒布局。
HTML改变后的代码为:
<cover-view class="bottom-view-outer" style="">
<cover-view class="bottom-view-inter" style="">
<cover-view class="buttom-view-icon-button" @click="moveTolocation">
<cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
</cover-view>
<cover-view class="bottom-view-button" style="">
</cover-view>
<cover-view class="buttom-view-icon-button" @click="moveTolocation">
<cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
</cover-view>
</cover-view>
</cover-view>
CSS改变后的代码为:
.bottom-view-outer {
position: fixed;
bottom:75rpx;
width: 100%;
}
.bottom-view-inter {
display:flex;
align-items: center;
justify-content: space-around;
}
这时候我们发现问题解决了!