1. movable-view组件具体内容可参考官网：微信官方文档

2. demo参考：https://github.com/ChinaFanny/YFWeappMovableView

 

 

运行效果

 

 

核心代码

<!--components/movable-custom-view/movable-custom-view.wxml-->
<view class="move-view">
  <movable-area class="custom-class" style="pointer-events: none;height: {{moveViewHeight}};width: 100%;left:0px;top:0px;">
    <movable-view wx:if="{{show}}" direction="all" x="{{moveViewX}}" y="{{moveViewY}}" animation="{{false}}" style="pointer-events: auto; width: 40px;height:56px;z-index: 999;" bindtap="onHome">
      <view class="img-view">
        <image src='/images/home.png' class="home-img"></image>
        <view class="home-txt">返回首页</view>
      </view>
    </movable-view>
    <slot></slot>
  </movable-area>
</view>

 

// components/movable-custom-view/movable-custom-view.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false
    },
    moveViewHeight: {
      type: String,
      value: 0
    },
    moveViewX: {
      type: Number,
      value: 0
    },
    moveViewY: {
      type: Number,
      value: 0
    }
  },

  externalClasses: ['custom-class'],
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onHome:function(){
      wx.reLaunch({
        url: '/pages/index/index',
        success: function (res) { },
        fail: function (res) { },
        complete: function (res) { },
      })
    }
  }
})

 

<!--pages/next/next.wxml-->
<view class="container">
  <view class="movable-view">
    <movable-custom-view show="{{true}}" moveViewHeight="100%" moveViewX="{{moveViewLeft}}" moveViewY="{{moveViewTop}}">
      <image src="{{imgSrc}}" mode="widthFix"></image>
    </movable-custom-view>
  </view>
</view>

// pages/next/next.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    sysWidth: wx.getSystemInfoSync().windowWidth, //屏幕宽度
    sysHeight: wx.getSystemInfoSync().windowHeight,//屏幕高度
    imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569414294423&di=1ccf0e0e83d9ecf16453de12b36503da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F26%2F20180126224524_xrrdq.thumb.700_0.jpg'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    var sysWidth = this.data.sysWidth
    var sysHeight = this.data.sysHeight
    this.setData({
      // 获取屏幕宽度
      moveViewLeft: sysWidth - 50,
      moveViewTop: sysHeight - 100,
    });
  },
})

 

demo参考：https://github.com/ChinaFanny/YFWeappMovableView