微信小程序悬浮框实现

最近在公司负责微信小程序，小程序相比html，JavaScript更加简单。很多接口直接就给了，所以我们直接利用就好了。

下面说正题：

微信小程序悬浮框实现

效果图如下：

      做了一个随时拨打客服电话的悬浮框

1.第一种

目录结构如下：

index.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    top: {
      type: String,
      value: '40%',
    },
    left: {
      type: String,
      value: '89%',
    }
  },
  data: {
    // 这里是一些组件内部数据
    // top: '80%',
    // left: '89%',
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
      var res = wx.getSystemInfoSync();
      this.setData({
        systemInfo: res,
      })
    },
    moved: function() {},
    detached: function() {},
  },

  methods: {
    // 这里是一个自定义方法
    //拖动不超过规定范围
    /**
     * 计算拖动的位置
     */
    setTouchMove: function(e) {
      var top = e.touches[0].clientY;
      var left = e.touches[0].clientX;
      var systemInfo = this.data.systemInfo;
      var maxTop = systemInfo.windowHeight * 0.78;
      var maxLeft = systemInfo.windowWidth * 0.89;
      if(top < 0){
        top = 0;
      }
      if (top > maxTop ){
        top = maxTop;
      }
      if(left < 0){
        left = 0;
      }
      if (left > maxLeft){
        left = maxLeft;
      }
      this.triggerEvent('myevent', {
        top: top + "px",
        left: left + "px"
      });
    },
    setCoordinates: function() {
      var left = Number(this.data.left.replace("px",""));
      if (left > (this.data.systemInfo.windowWidth / 2)) {
        left = this.data.systemInfo.windowWidth*0.89;
      } else {
        left = 0;
      }
      this.triggerEvent('myevent', {
        top: this.data.top,
        left: left + "px",
      });
    },
    /**
     * 拨打客服电话
     */
    makephone: function() {
      wx.makePhoneCall({
        phoneNumber: "043184863311",
        success: function() {
          console.log("拨打电话成功")
        }
      })
    }
  }
})

index.json

{
  "component": true
}

index.wxml

<view class="firstView"  catchtouchmove="setTouchMove" catchtouchend='setCoordinates' style="left: {{left||'89%'}};top: {{top||'55%'}};" >
  <view>
    <image class='kehuImg' bindtap='makephone' src="/images/kefu.png"></image>
  </view>
</view>

index.wxss

.firstView {
  position: absolute;
  height: 70rpx;
   70rpx;
  padding: 10rpx;
  background-color: #35d75d;
  border-radius: 50%;
}
.kehuImg {
  height: 70rpx;
   70rpx;
}

现在写完了自定义组件，接下来那个页面需要就在该页面引入

引入代码：

 <!-- 以下是对一个自定义组件的引用  -->
<view>
  <component-tag-name top="{{component.top}}" left="{{component.left}}" bindmyevent='onMyEvent'></component-tag-name>
</view>