微信小程序懸浮框實現

最近在公司負責微信小程序，小程序相比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;
  width: 70rpx;
  padding: 10rpx;
  background-color: #35d75d;
  border-radius: 50%;
}
.kehuImg {
  height: 70rpx;
  width: 70rpx;
}

現在寫完了自定義組件，接下來那個頁面需要就在該頁面引入

引入代碼：

 <!-- 以下是對一個自定義組件的引用  -->
<view>
  <component-tag-name top="{{component.top}}" left="{{component.left}}" bindmyevent='onMyEvent'></component-tag-name>
</view>