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

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

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

问题1：首次进入页面，拖动图片页面，图片随着鼠标移动。滚动页面后，再去移动图片，图片消失。滚动数据依旧变化，将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  })},