新手之百度地图和Swiper下滑翻页遇到的问题（top问题）

最新推荐文章于 2021-06-04 02:38:50 发布
最新推荐文章于 2021-06-04 02:38:50 发布
阅读量532 收藏 1
点赞数
分类专栏： javascript学习 文章标签： 百度 javascript swipe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43837225/article/details/106213306
版权

Swiper下滑至第二页后百度右键菜单问题

最近在学习并开发js展示项目，用到了百度地图，记录一下遇到的问题并看看大家是否有同样的问题，如果有你是怎么解决的呢？大家可以一起讨论下。

一，在html上添加4个容器，分别用于4个地图

在这里插入图片描述

二，初始化Swiper的配置信息

这里我用了4个页面，每一页都是引入了BMap
在这里插入图片描述
初始化地图，第一个地图是在页面加载的时候生成，其它是在下滑后触发
1，第一个地图在加载的时候初始化
在这里插入图片描述
2，其它地图在下滑后初始化
在这里插入图片描述

三，现在的问题，当下滑到后面的页面时候在地图上点击右键出现问题

在这里插入图片描述
写了统一的方法给地图添加右键菜单，但是在第四页添加的时候，右键如果不重写样式菜单显示不出来，会显示到屏幕外面，这里不知道是Swiper和百度地图的样式是否有冲突，最后通过判断是第几页，同时计算出点击所在位置重写了top，top重写前高度是根据第一个定位的，所以在这发现了这个规律并根据规律重写了右键菜单的top样式；这里还有一个问题，就是地图右键的坐标好像是根据像素点计算的，所以这里也给坐标点重新计算了。
在这里插入图片描述

以上问题如果没有描写清楚欢迎大家留言讨论

末尾是一个自带的猿人图:Alt

Z。L L。-做事
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的...
微信小程序swiper使用网络图片不显示问题解决
10-15
主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
h5 控制页面不可以返回_h5不能翻页怎么办
weixin_36016360的博客
01-17 668
如何制作带有翻页效果的免费手机H5页面？现在有许多风靡的H5页面，这些手机H5页面的特别吸引人，那么在H5页面里如何进行手机页面的翻页特效呢？下面给大家推荐一个VX互动大师的在线工具，并用它来教大家如何制作特别的手机h5页面翻页。步骤1：新建一个手机案例创建手机案例，进入互动大师，点击我的作品——创建作品——手机案例2添加两个页面对象，对于舞台大小的设置，手机案例一般默认是640*1040，这是i...
js百度地图marker与swiper轮播图联动
crli的博客
06-14 2349
项目需求，安卓、ios引入webview地图内容与轮播联动，效果与百度题图wabapp效果相同，调用自己数据，地图里面放坐标，地图下部放轮播，并且单击maker坐标时候轮播图滑到相应位置，滑动轮播图，相应坐标弹出信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpor
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
weixin_35853975的博客
04-16 368
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话，可以用百度地图的api.具体使用方法如下：第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。第三步：添加标注。点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。标记图标处可更换图标形状，名称和备注填入位置相关信息。第四步：获取代码。将代码贴到你的网页里就OK了。代码如下：复制代码代码如下:ttp://www....
html嵌套百度页面,如何把百度地图嵌入到网页里
weixin_39583013的博客
06-04 1415
今天介绍下如何把百度地图嵌入到我们的网站里，现在很多交互网站的联系我们都是用实时地图来做的，大方美观而且实用1、首先，我们需要注册百度账号去获取一个密钥，一个账号一个人的名字注册后可以有20个密钥的获取机会，这一步就略过2、然后在http://developer.baidu.com/map/jshome.htm这里选择你要展现的形式，我们一半选地图展示就行，支持缩放的，进去后在下面或有代码展示，没...
swiper商品缩略图和大图点击时联动
aitengteng1的博客
04-27 1576
<divclass="imgshow"> <swiper:options="swiperOption"ref="swiperTop"class="swiper-no-swiping"> <!--<divclass="swiper-wrapper">--> <swiper-slide...
Swiper滑动上下左右翻页.zip
07-12
在"Swiper滑动上下左右翻页.zip"这个压缩包中，我们很可能找到了Swiper的源码和一些演示示例，这将有助于我们更好地理解和应用Swiper。 Swiper 的核心功能包括： 1. **多方向滑动**：Swiper 支持上下左右四个方向...
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
在Vue中使用Swiper插件，首先需要理解Swiper本身的功能和特性。Swiper是一款强大的触摸滑动插件，尤其适合于移动设备上的应用，它提供了丰富的动画效果和交互功能，如焦点图、Tab切换、多图切换等。在Vue项目中集成...
解决百度地图滚轮缩放和页面滚动条的矛盾
weixin_40496191的博客
12-03 4437
今天做需求的时候，需要使用到百度地图。使用到地图的滚轮缩放功能时候，发现地图的缩放会带动页面的滚动条滚动，导致页面美观下降。经过查资料找到了解决办法。在页面初始化的时候加入以下一段代码： gisMap.onmousewheel=function (e) { e= e || window.event; if(document.all){ e.cancelBubble=true; }else{ e.s...
轮播图、瀑布流、百度地图API
08-17
百度地图API、轮播图以及瀑布流。外带一个登陆界面（不带后台），账号zkw299，密123456
GOOGLE地图自动翻页工具
10-10
GOOGLE地图自动翻页增加缓存内容
swiper包含echarts图表问题
Mr.Tang的博客
07-19 1329
在swiper插件使用中，轮播内容含有echarts图标的时候loop设置为true产生的问题：设置loop为true时，echarts图表不显示原因：被复制的div中没有复制canvas ...
swiper 定位到指定页面或位置
热门推荐
hongweigg的专栏
09-20 4万+
背景： 使用swiper控件进行图片展示，既有条件是: （1）有一个图片数组，包含图片的url （2）有一个图片文件名列表（表格） （3）图片文件名列表中的数据来源于图片数组 问题： 现在要求利用swiper进行图片显示，点表格中的图片文件名，能用swiper进行展示选中的图片，同时，能使用swiper进行前后切换，查看图片数组中的其他图片。 解决： （1）点击图片文件
swiper实现局部内容滚动效果
马优晨
07-19 2万+
先看一下效果图:在蓝色的背景里面文字可以上下滚动，这个就是我们需要的效果。具体代码如下：<!DOCTYPE html> <!-- saved from url=(0054)http://www.swiper.com.cn/demo/32-scroll-container.html --> <html lang="en"><head><meta http-equiv="Content-Type" co
vue-baidu-map 当父元素设置overflow，并有滚动条时，滚轮缩放地图中心点有偏移
lxzcaicai的博客
06-09 2836
进日在使用百度地图的时候发现一个问题，当父元素有滚动条的时候，滚轮缩放百度地图鼠标滚轮中心会有偏移。不是中心点。但是整体页面(浏览器)有滚动条的时候就没有这种情况。 类似下方这种情况！ 再查阅一番资料后，得知百度地图的缩放是基于body层的，如果body层有滚动条，并且不在最顶端，在当前位置插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。 但是，目前的情况是父元素出现了滚动条，当初始加载地图没有完全展现在视野中的时候，会出现滚动条。 如果初始加载地图出现在视野中在(最顶端),缩放
swiper如何防止冲突_H5使用Swiper过程中遇到的滑动冲突
weixin_39986060的博客
01-30 881
一、问题(1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动，点击左键按着也是拖不动(2)手机端浏览H5手指不能滑动页面，导致很多页面下面的文字看不到二、解决问题1.下面分先说css的问题，主要排查overflow：hidden；检查也有一定的顺序，检查超出高度的标签是否用了overflow：hidden；最好先检查html或body是不是加了height：100%；overflow：hidden...
vue动态生成swiper-slide的问题
最新发布
09-07
您好，对于动态生成swiper-slide的问题，您可以通过在Vue中使用v-for指令来实现。以下是一个简单的示例： ```html <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in slideItems" :key="item.id"> {{ item.content }} </div> </div> </div> </template> <script> export default { data() { return { slideItems: [ { id: 1, content: "Slide 1" }, { id: 2, content: "Slide 2" }, { id: 3, content: "Slide 3" }, ], }; }, }; </script> <style> .swiper-container { width: 100%; height: 100%; } .swiper-slide { background-color: #ccc; width: 100%; height: 100%; } </style> ``` 在上面的示例中，我们使用v-for指令来遍历slideItems数组，并将每个item生成为一个swiper-slide。您可以根据您的需求，动态设置slideItems数组中的内容和数量。 请注意，这里使用了一个唯一的key属性来标识每个slide，这是Vue中要求的。此外，您可能还需要在页面加载后初始化swiper实例。 希望能对您有所帮助！如果还有其他问题，请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值