小程序

首页 -  小程序  -  微信小程序地图定位,小程序弹出层

微信小程序地图定位,小程序弹出层

微信小程序地图定位,小程序弹出层

wxml文件中地图部分的代码

<map id="map" longitude="116.410440" latitude="39.970830" 
     scale="14" controls="{{controls}}" bindtap="openMap" bindcontroltap="controltap" 
     markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" 
     bindregionchange="regionchange" show-location style="width: 100%; height: 150px;">

这是js代码

data: {  
   markers: [{  
     iconPath: '/images/icon-location.png',  
     id: 0,  
     latitude: 39.970830,  
     longitude: 116.410440,  
     width: 30,  
     height: 30  
   }]  
 },  
 openMap: function () {  
   wx.openLocation({  
     latitude: 39.970830,  
     longitude: 116.410440,  
     scale: 14,  
     name: '商务大厦'  
   })  
 },

小程序弹出层最简单写法,需要处理滚动穿透问题(滚动弹出层,底部页面也滚动)

实现小程序弹出层非常简单:只需要在元素内引用一下这些标签即可实现,

 style="position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index:999;background-    color:rgba(0,0,0,0.5);"

背景颜色自己更换,如果想要实现滚动,配置scrow-view使用效果很好,不过要解决滚动穿透的问题。


使用modal组件+scroll-view实现弹出层列表:

这种方法不用自己学弹出层,但是也需要处理滚动穿透的问题,本人完美解决很贱单:

modal中的scroll设置好scroll-y,然后当弹出层出现的时候吧底部的page添加一个样式,

.noscroll {

     height: 100%;

     overflow: hidden;

}

关闭弹出层的时候就把这个class去掉就可以了。


(2)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读