微信小程序组件 movable-area 穿透性问题

使用场景：在页面中，通过拖动图标，可以在手机窗口中随处移动，且不超出手机窗口范围。

movable-area 的可移动区域，注意：movable-area 必须设置width和height属性，不设置默认为10px

movable-view 可移动的视图容器，在页面中可以拖拽滑动，详情查看小程序官方文档

问题一：首次进入页面，拖动图片页面，图片随着鼠标移动。滚动页面后，再去移动图片，图片消失。滚动数据依旧变化，将movable-view 设为 z-index: 999 !important仍看不到图片。

官方之处：movable-view目前只能在movable-area里面移动。如果你需要在手机可视区域移动，那请尝试将movable-area撑满整个可视区域。

HTML:

<movable-view class='navigation' catchtap='navigation' catchtouchmove='move' style='top:{{top}}px !important;left:{{left}}px !important; z-index: 999 !important' inertia="false">
  <image src='../../images/common/scan@2x.png' class='float-icon'></image>
</movable-view>

JS:

Component({
  data: {
    top: 456,//初始显示坐标 单位px
    left: 346,
  },

  methods: {
    move(e) {//移动时触发的方法
      let that = this;
      that.setData({
        top: e.changedTouches[0].pageY,//重置坐标
        left: e.changedTouches[0].pageX
      })
    },
  }
})

CSS:

.navigation {
    position: fixed;
    width: 58rpx;
    height: 58rpx;
    border-radius: 50%;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    z-index: 999;
}
.float-icon {
  width: 58rpx;
  height: 58rpx;
}

问题二：将movable-view 设置占满手机窗口，由于层级太高，导致页面点击事件失效。

JS：

onLoad: function(options) {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth
        })
      },
    })
  },

HTML:

  <movable-area style="width:{{screenWidth}}px;height:{{screenHeight-50}}px;">
    <movable-view x="{{x}}" y="{{y}}" direction="all">
      <image src='../../images/common/scan@2x.png'></image>
    </movable-view>
  </movable-area>

问题三：解决movable-area优先级太高问题，通过z-index 将movable-area 设置为 -1。页面上的可以实现点击事件，但是可移动的浮动图标在页面的最底层，导致无法移动浮动的图标。

兜兜转转，回到原点。

movable-area由于优先级过高，导致的点击事件无法穿透性问题。

那么将movable-area 置于最外层标签，将页面中的内容都放置在movable-area 内容中。

同时将页面中的内容高度设置为窗口高度，设置overflow-y: scroll;使页面可以滑动。

可以到达页面可以上拉页面，同时浮动图标也可以在窗口中到处移动。

HTML:

<movable-area style="width:{{screenWidth}}px;height:{{screenHeight-40}}px;">
  <view class='container' style='height:{{screenHeight-40}}px;overflow-y:scroll;'>
    主要内容。。。。
    <movable-view x="{{x}}" y="{{y}}" direction="all">
      <image src='../../images/common/scan@2x.png'></image>
    </movable-view>
  </view>
</movable-area>

问题四：虽说浮动的图标可以到处移动之后，又产生了新的问题：对于列表信息，上拉加载更多无法触发 onReachBottom 事件。有一种刚把一个坑填了，又挖了一个坑给自己。

通过查看小程序社区，有很多关于无法触发 onReachBottom 事件的解决方案。将外面层 movable-area 注释掉，则 class 为 container 的那个 view 标签可以触发上拉触底事件。

那么问题来了，为了图标到处移动和页面可以实现触发点击事件，因此添加的在最外层添加 movable-area 标签，却导致无法触发页面上拉触底事件。

除了页面的上拉触底事件之外，scroll-view同样可以到达上拉加载更多效果。小程序官方文档

<movable-area style="width:{{screenWidth}}px;height:{{screenHeight}}px;"> 
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{screenHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    主要内容。。。
    <movable-view style=' position: fixed;' x="{{x}}" y="{{y}}" direction="all">
      <image src='../../images/common/scan@2x.png' bindtap='scan'></image>
    </movable-view>
  </scroll-view>
</movable-area>

bindDownLoad: function() {
  if (this.data.page == this.data.totalPages || this.data.page > this.data.totalPages){
    this.setData({
      moreData: false
    })
    return;
  }
  this.setData({
    page: this.data.page + 1
  })
  this.getRecommend('state')
},

通过 bindscroll 滚动触发，来实时计算滚动位置 scrollTop。当页面滚动了一定的距离，即 scrollTop 大于一定值之后，我们将显示回到顶部的图标。

scroll(e){
  var scrollTop = e.detail.scrollTop
  var backTopValue = scrollTop > 200 ? true : false
  this.setData({
    backTopValue: backTopValue
  })
},

回到顶部：

<view class='goTop' hidden='{{!backTopValue}}' bindtap="backTop">
  <image src='../../images/common/backtop@2x.png'></image>
</view>

JS:

backTop: function() {
  // 控制滚动
  this.setData({
    scrollTop: 0
  })
},