【微信小程序】d出层穿透问题的解决方案

目前小程序d出层穿透有两种问题：

第一种：小程序d出层不滚动的时候，往上下拉时会连页面一起拉动，这个用户体验性很差的。

解决方案：在wxml中，增加catchtouchmove=true，就ok了～

第二种：小程序d出层滚动的时候，加catchtouchmove没效果

解决方案：利用scroll-view和page的overflow:hidden组合使用

d出层的时候，isShowPicker为false，就是禁止scroll-view滚动。关闭d出层，isShowPicker为true，就能正常滚动。

效果展示

通过在界面素材中添加一个底部悬浮层，同时配置触发器行为打开悬浮层，实现一个底部悬浮层d出的效果。

添加悬浮层

点击左侧导航栏的界面。

添加一个底部悬浮层。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中图标。

点击检查面板中的触发器。

创建触发器。

选中悬浮层中的微信图标。

点击检查面板中的触发器。

配置打开分享面板触发器。

点击“分享”按钮，d出一个d层，包括转发给好友，转发海报等

把这个分享层，做成了一个公共组件，onShareAppMessage要放在父组件中！！！！

显示/关闭 d层的方法，也在父组件中，也就是说，在子组件中点击关闭按钮，来触发父组件中的关闭事件！！！！

父组件的onShareAppMessage方法如下：

// 来自页面内转发按钮

onShareAppMessage (res) {

let {hotel_id,hotel_name}=this.state

  if (res.from ==='button') {

this.hideShareModel()

  }

return {

title: hotel_name,

    path:'/pages/goods/info?id='+hotel_id

}

}

另外，转发已经得不到 是否成功的回调。因为微信官方说，存在大量滥用转发功能来诱导用户的行为，所以去掉了转发的回调！！！

---