使用場景：在頁面中，通過拖動圖示，可以在手機視窗中隨處移動，且不超出手機視窗範圍。

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/[email protected]' 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/[email protected]'></image>
    </movable-view>
  </movable-area>

問題三：解決movable-area優先順序太高問題，通過z-index 將movable-area 設定為 -1。頁面上的可以實現點選事件，但是可移動的浮動圖示在頁面的最底層，導致無法移動浮動的圖示。

兜兜轉轉，回到原點。

movable-area由於優先順序過高，導致的點選事件無法穿透性問題。

那麼將movable-area 置於最外層標籤，將頁面中的內容都放置在movable-area 內容中。

同時將頁面中的內容高度設定為視窗高度，設定overflow-y: scroll;使頁面可以滑動。

可以到達頁面可以上拉頁面，同時浮動圖示也可以在視窗中到處移動。