评论

地图挡住固定在底部按钮的解决办法

虽然可以解决地图挡住底部按钮,但还有点小瑕疵,滚动条还是会被地图挡住,按钮左右下三边离屏幕边上有空隙时不适用。如果不介意的话,希望可以帮到你们。

主要代码:

wxml:

<view class="container">
  <scroll-view class="main" scroll-y>
    <view style="height: 100%;"></view>
    <map class="map" id="map" style="width: 100%; height: 200px;"></map>
  </scroll-view>
  <view class="btn">按钮</view>
</view>

wxss:

page, .container {
  height: 100%;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}

.container .main {
  flex: 1;
}

.container .btn {
  height: 90rpx;
  background: #ff5200;
  color: #fff;
  line-height: 90rpx;
  text-align: center;
}

手机上效果图

代码片段:https://developers.weixin.qq.com/s/A0JmrkmN7087

最后一次编辑于  2019-05-13  
点赞 4
收藏
评论

2 个评论

  • 鲤猫🐠
    鲤猫🐠
    2019-05-13

    wxml:

    <view class='map-box'>

    <map class="map"></map>

    </view>

    <view class="btn">按钮</view>



    wxss:

    page {

    height: 100%;

    }


    .map-box {

    position: fixed;

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    padding-bottom: 90rpx;

    }


    .map {

    height: inherit;

    width: 750rpx;

    }


    .btn {

    height: 90rpx;

    width: 750rpx;

    position: fixed;

    bottom: 0;

    line-height: 90rpx;

    text-align: center;

    color: #fff;

    background: #ff5200;

    }

    手机效果:



    思路:map外面包一个view 叫map-box

    map-box设置padding-bottom为 按钮的高度

    map设置为继承高度

    2019-05-13
    赞同 1
    回复
  • Run
    Run
    2019-05-22

    cover-view 可实现自定义, 创建于原生组件map之上

    2019-05-22
    赞同
    回复
登录 后发表内容