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去掉就可以了。
本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!