微信小程序 -- 右下角的悬浮效果，实现刷新功能（可拖拽）

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

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

      

一.封装组件

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

1.movableView.wxml内容

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

movable-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.js
Component({
  /**
   * 组件的属性列表
   */
  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中引入组件：，其中refrash为useMovable父组件的方法。

   刷新{{num}}

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

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