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

前端之家收集整理的这篇文章主要介绍了微信小程序地图定位,小程序弹出层前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

wxml文件中地图部分的代码


这是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,  
     scale: 14,  
     name: '商务大厦'  
   })  
 },

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

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

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

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


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

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

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

.noscroll {

     height: 100%;

     overflow: hidden;

}

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


猜你在找的微信小程序相关文章