收藏
回答

如何防止map组件随屏幕滚动?

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug map 客户端 Android 6.5 2.2.2

 使用:

.mapmask {

  position:fixed;

  top: 3rem;

  left: 0;

  bottom: -1;

  right: 0;

  z-index: 1000;

  background-color: rgba(255, 255, 255, 1)

}

期望防止map组件滚动。在微信开发者工具中确实实现了,但在手机中运行时,现象是:滑动屏幕时,有个空白区域不动,但地图还是随着屏幕滑动了。修改了很多次都无法实现。该如何办?难道只能接受?


最后一次编辑于  2018-08-14  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

14 个回答

  • 是柿子啊
    是柿子啊
    2018-08-14

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-08-14
    赞同
    回复 1
    • Norier
      Norier
      2018-08-15

      回复了啊,求教,大神!

      2018-08-15
      赞同
      回复
  • Norier
    Norier
    2018-08-14

    荣耀9:STF-AL10 8.0.0(Android8.0)

    微信:6.6.7


    这个是期望利用不滚动的弹窗来实现。开发工具中确实实现了,但手机中Map会随屏幕滚动,并留下一个空白区域不滚动。

    wxml:

    <view class='mapmask' catchtouchstart='test'>

      <view class="page-section page-section-gap" wx:if="{{dispMap}}">

        <map

          id="myMap"

          style="width: 100%; height: 300px;"

          latitude="{{latitude}}"

          longitude="{{longitude}}"

          markers="{{markers}}"

          show-location

        ></map>

      </view>

    </view>


    wcss:

    .mapmask {

      position:fixed;

      top:3rem;

      left:0;

      bottom:-1;

      right:0;

      z-index:1000;

      background-color:rgba(255, 255, 255, 1)

    }


    2018-08-14
    赞同
    回复 9
    • 是柿子啊
      是柿子啊
      2018-08-15

      你好,请按照教程提供一下代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html 

      2018-08-15
      赞同
      回复
    • Norier
      Norier
      2018-08-15回复是柿子啊

      这个有点晕。还要学习如何做代码片段!我要哭晕在这里!!!

      2018-08-15
      赞同
      回复
    • Norier
      Norier
      2018-08-15回复是柿子啊

      wechatide://minicode/p6fnqGm47F1V


      终于做好了一个代码片段,我的天。

      提示:在开发者工具中此map组件不会随屏幕滚动,但在手机上去会随屏幕滚动——让人晕的是:代码片段还不能在手机中预览!

      2018-08-15
      赞同
      回复
    • Norier
      Norier
      2018-08-15回复是柿子啊

      wechatide://minicode/p6fnqGm47F1V


      终于做好了一个代码片段,我的天。

      提示:在开发者工具中此map组件不会随屏幕滚动,但在手机上去会随屏幕滚动——让人晕的是:代码片段还不能在手机中预览!


      追加一个说明:那个微信的小图标是用同样方法显示的,它就可以不随屏幕而滚动。

      2018-08-15
      赞同
      回复
    • 是柿子啊
      是柿子啊
      2018-08-15回复Norier

      你好,原生组件是不支持position:fixed定位的


      2018-08-15
      赞同
      回复
    查看更多(4)
  • 闻有刀
    闻有刀
    2018-08-31

    你们这个问题解决了么?

    2018-08-31
    赞同
    回复 1
    • Norier
      Norier
      2018-09-01

      别个已经解释,原生组件不支持!!!

      2018-09-01
      赞同
      回复