如下效果图，右下角有个绿色背景的刷新按钮，这个按钮是悬浮着，可拖拽。这个悬浮效果，我只举例刷新的功能，当然也可以做回到顶部等类似的功能。

第一个截图是初始页面加载完的效果，第二个截图是拖拽后的效果，第三个截图是点击3次刷新按钮后的效果。

一.封装组件

创建一个组件"movableView"，用于实现刷新功能

1.movableView.wxml内容

movable-area组件：是movable-view的可移动区域，必须需设置width,height。这里x,y的值，是在js中获取使用设备的windowWidth、windowHeight，具体后面再讲。

movable-view组件：可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

movable-area style="pointer-events: none;width:{{x}}px;height:{{y}}px;position:fixed;top:0;right:0;"  movable-view class="move" style="pointer-events: auto;" direction="all"  !-- 刷新 --    view class='refrash' bindtap='refrash'刷新/view  /movable-view/movable-area

注意（要看懂下面，否则可能会出现一些问题）：

因为在这里我设置movable-area的width、height的值是整个可使用屏幕的大小，所以此时需要设置一个样式pointer-events: none，然后它的子元素movable-view需要设置pointer-events: auto，让它可以操作，如触发事件。

pointer-events:none：通俗来讲，就是使用这个属性后，该元素就呈现一种可忽略的状态，点击会穿透它，直接点击到该元素下面的元素。然后该元素的子元素，可设置pointer-events: auto，让它可以进行某些操作，比如触发点击事件bindTap。

2.movableView.wxss内容

"move"类名对应的是movable-area组件，它只能设置left、top这两个值，设置right、bottom无效。

.move {  width: 100rpx;  height: 100rpx;  padding: 4rpx;  left: 84%;  top: 90%;}.refrash {  height: 100%;  width: 100%;  display: flex;  justify-content: center;  align-items: center;  border-radius: 50%;  background: #09b06d;  color: #fff;}

3. movableView.js内容

首先，了解一下组件生命周期：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html（官方文档）

31.attached：在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

所以，在attached里，使用wx.getSystemInfo去获取设备的windowWidth、windowHeight这两个值（是指可使用的宽高）

32.refrash：刷新按钮所绑定的点击事件名称，其中this.triggerEvent('pagerefrash')这段代码里，pagerefrash为自定义名称事件，如果需要传参数给父组件的话，可以this.triggerEvent('pagerefrash',值)，该值类型可以为字符串、数字、对象、数组等等。

// pages/component/movableView.jsComponent({  /**   * 组件的属性列表   */  properties: {  },  /**   * 组件的初始数据   */  data: {    x: 0,    y: 0  },  /**   * 组件的方法列表   */  methods: {    // 当前页面刷新    refrash: function (e) {      this.triggerEvent('pagerefrash') //pagerefrash自定义名称事件，父组件中使用    }  },  attached: function () {    var that = this;    wx.getSystemInfo({      success: function (res) {        that.setData({          x: res.windowWidth,          y: res.windowHeight        })      },    })  }})

 二.配置组件

在app.json文件进行配置

在usingComponents属性里进行配置，自定义组件名：路径

"usingComponents": {    "movableView": "./pages/component/movableView/movableView"},

三.使用

创建页面useMovable

在useMovable.wxml中引入组件：movableView bind:pagerefrash="refrash"/movableView，其中refrash为useMovable父组件的方法。

view   text刷新{{num}}/text/viewmovableView bind:pagerefrash="refrash"/movableView

如下，useMovable.js中，refrash方法里，接受子组件传来的值，以及进行其他的操作。

Page({  /**   * 页面的初始数据   */  data: {    num:0  },  // 刷新  refrash:function(){    this.setData({      num:this.data.num+1    })  },})