【黄啊码】记小程序的一个大坑，bindtap无效

这段代码看上去没问题吧？

代码语言：javascript复制

<view class="other_info">
  <view class="order_left"><text class="order_map" bindtap="openMap">地图</text></view>
  <view class="order_right"><text class="order_detail" bindtap="openDetail">详情</text></view>
</view>

布局css也没问题吧？

代码语言：javascript复制

.order_left{width:50%;line-height:100rpx;text-align:center;float:left;}
.order_right{width:50%;line-height:100rpx;text-align:center;float:left;}
.order_detail{border:#05af49;padding:10rpx;border-radius:13rpx;background:#05af49;padding-left:15px;padding-right: 15px;color:#FFF;}
.order_map{border: #d20303;padding:10rpx;border-radius:13rpx;background:#d20303;padding-left:15px;padding-right:15px;color:#FFF;}

样子也写得人（狗）模人（狗）样吧？

js也行吧？

代码语言：javascript复制

 openMap:function(){
    let that=this;
    wx.openLocation({
    latitude: that.data.latitude,
    longitude: that.data.longitude,
    scale: 18,
    name: that.data.name,
    address: that.data.address
  })
  },

嗯，然后就是不触发，为啥？查询了一下，网友说：position：absolute，额这不就是要我把float：left去掉的节奏，然后，然后我去掉之后

最终，我被迫使用了flex布局。wxss改成如此，同样的效果，但js点击生效了

代码语言：javascript复制

.other_info{display: flex;}
.order_left{width:50%;line-height:100rpx;text-align:center;}
.order_right{width:50%;line-height:100rpx;text-align:center;}
.order_detail{border:#05af49;padding:10rpx;border-radius:13rpx;background:#05af49;padding-left:15px;padding-right: 15px;color:#FFF;}
.order_map{border: #d20303;padding:10rpx;border-radius:13rpx;background:#d20303;padding-left:15px;padding-right:15px;color:#FFF;}

心中顿时好多只羊驼在跑！！

css absolute flex position 布局

0 人点赞